Added Image Texture to the Plane Very Blurry and Rotated

Questions
,
1

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>

A
A1920×1080 231 KB

image
image1257×674 32.1 KB

Thanks in advance

2

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
3

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

4

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
5

Ok,
Thanks for the explanation.

6

hello Mugen! I found that when I roate the plane and it not towards the camera. the texture goes blured. How can I avoid this? Really appreciate if you have time to give an answer.

7

Here is an updated version of the above fiddle with anisotropic filtering: Edit fiddle - JSFiddle - Code Playground

This will solve the issue of blurred textures when viewed at a steep angle. The relevant line is:

texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
8

wow it works as you said.
Thank you very much Mugen!

1 Like