The loaded texture appears to be blurry or similar to a single color. How to make a texture clear and sharp

I am using three.js to generate some basic 3D image. I am loading a jpeg image as a texture to apply in custome geometry as shown:

var floor = new THREE.Shape([
              new THREE.Vector2 (300,  50),
              new THREE.Vector2 (450, 100),
              new THREE.Vector2 (650,  80),
              new THREE.Vector2 (700,  180),
              new THREE.Vector2 (980,  280),
              new THREE.Vector2 (900,  420),
              new THREE.Vector2 (850,  560),
              new THREE.Vector2 (600,  590),
              new THREE.Vector2 (500,  500),
              new THREE.Vector2 (370,  570),
              new THREE.Vector2 (200,  410),
              new THREE.Vector2 (10,  300),
              new THREE.Vector2 (100,  200),
              new THREE.Vector2 (230,  180),
            ]);
            var floorGeometry = new THREE.ExtrudeGeometry(floor, {
              bevelEnabled: false,
              amount: 10
            });



            var grass_1 = new THREE.ImageUtils.loadTexture("images/grass_1.jpg");



            var floorMaterial = new THREE.MeshPhongMaterial({
                map:grass_1
            });



            var mesh = new THREE.Mesh(floorGeometry, floorMaterial);
                mesh.rotation.x = -90 * Math.PI / 180;
                mesh.position.x = -500;
                mesh.position.z = 300;
                mesh.receiveShadow = true;
                scene.add(mesh);

                var light = new THREE.DirectionalLight(0xFFFFFF, 1);
                light.position.set(1, 3, 2);
                scene.add(light); 
                light.castShadow = true;
                light.shadowDarkness = .1;
                light.shadowMapWidth = 2048;
                light.shadowMapHeight = 2048;
                light.position.set(500, 1500, 1000); 
                light.shadowCameraFar = 2500; 

                light.shadowCameraLeft = -2000;
                light.shadowCameraRight = 2000;
                light.shadowCameraTop = 2000;
                light.shadowCameraBottom = -1000;

      

Instead of harsh grass texture, it looks like a blurry / flat green fill. enter image description here

Texture used:

enter image description here

Texture file

is a 512 x 512 px JPEG file.

+1


source to share


1 answer


ExtrudeGeometry

was originally for text. If you look at the UV rays it generates, it uses the x- and y-components of the vertex positions for the UVs. In your case, these values ​​are outside the range [0, 1].

. - - . . .



, 1000, [0, 1]. : mesh.scale.set( 1000, 1000, 1 );

three.js r.67

+1









All Articles