Added Image Texture to the Plane Very Blurry and Rotated

Hi,

I have an image texture added to the plane. Two problems I am facing:
1: The image so blurry
2: Image automatically rotated.

Please check the real image and the output in the attached screenshots.

Here is my code:

<div id="container"></div>

<input type="button" class="changeView" id="changeView" value="View 2D">

<script type="module">

import * as THREE from '../build/three.module.js';

import { OrbitControls } from '../build/jsm/controls/OrbitControls.js';

import { GLTFLoader } from '../build/jsm/loaders/GLTFLoader.js';

  let scene, camera, renderer, controls, light, model;

  function init() {

    scene = new THREE.Scene();

    scene.background = new THREE.Color(0x000000);

   const container = document.getElementById( 'container' );

    light = new THREE.SpotLight(0xffa95c,4);

    light.position.set(-50,50,50);

    light.castShadow = true;

    light.shadow.bias = -0.0001;

    light.shadow.mapSize.width = 1024*4;

    light.shadow.mapSize.height = 1024*4;

    scene.add( light );

    let hemiLight = new THREE.HemisphereLight(0xffeeb1, 0x080820, 2);

    scene.add(hemiLight);

    renderer = new THREE.WebGLRenderer();

    renderer.toneMapping = THREE.ReinhardToneMapping;

    renderer.toneMappingExposure = 1;

    renderer.setSize(window.innerWidth,window.innerHeight);

    renderer.shadowMap.enabled = true;

    container.appendChild( renderer.domElement );

    camera = new THREE.PerspectiveCamera(35,window.innerWidth/window.innerHeight,1,500);

    camera.position.set(0, 17, 17);        

    controls = new OrbitControls(camera, renderer.domElement);

    controls.minPolarAngle = Math.PI*0.1;

    controls.maxPolarAngle = Math.PI * 0.5;

    const texture = new THREE.TextureLoader().load( "../assets/A.jpg" );

    texture.wrapS = THREE.RepeatWrapping;

    texture.wrapT = THREE.RepeatWrapping;

    let material = new THREE.MeshLambertMaterial({ map : texture });

    // plane

    var plane = new THREE.Mesh(new THREE.PlaneGeometry(9, 10),material);

    plane.overdraw = true;

    // plane.transparent = true;

    plane.rotation.x = (-Math.PI / 2);

    plane.rotation.z = (-Math.PI / 2);

    plane.position.y = -1.5;

    scene.add(plane);

    new GLTFLoader().load('models/floorplans/scene.gltf', gltf => { 

      model = gltf.scene; 

      model.rotation.set(0,89.92,0);

      // model.position.set(0,0,0);

      // model.visible = false;

      scene.add(model);

      animate();

      let model3D;

      $(".changeView").on("click", function() {

        model3D = !model3D;

        if(model3D) {

          $(".changeView").val("View 3D");

          model.visible = false;

        }

        else {

          model.visible = true;

          $(".changeView").val("View 2D");

        }

      })

    });

  }

  function animate() {

    requestAnimationFrame(animate);

    renderer.render(scene,camera);

  }

  init();

</script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Thanks in advance

Try it like so: https://jsfiddle.net/uLpq8ewa/

Also ensure that the plane geometry has the aspect ratio of the image. Otherwise the result looks distorted.

1 Like

Thank you so much for the reply. It works perfecto.

One more question: When we write PlaneGeometry( 1, 1 ), this 1 is what measurement degree? inch? radian? or?
because we need to convert the aspect ratio of the image (for example, 1920px by1080px) to this degree right.

Thank you

It’s world units which is a more or less a conceptual unit of measurement. Usually it is 1 meter but you can assign any unit to it you like. For your case, it’s just important that the aspect ratios match.

1 Like

Ok,
Thanks for the explanation.