Loaded texture appears blurred, or like a single color. How to make the texture crisp and sharp

Question

I am using three.js to make some basic 3D, I am loading a jpeg image as texture to apply on a 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 a sharp grass texture, it appears like a blurred/ flat green fill.

Texture used:

texture file is a 512 x 512 px jpeg file.

Answer 1

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

You have two options. The first option is to provide your own UV-generator in a callback function. See the source code comments.

Alternatively, divide your shape coordinates by 1000 so they lie in the [ 0, 1 ] range. Then apply a scale to your mesh: mesh.scale.set( 1000, 1000, 1 );

three.js r.67

Answer 2

Just to build on WestLangleys answer, something like the function below would work:

fixUvs(geometry){

        var uvs     = geometry.faceVertexUvs[0]
        var newUvs  = [];

        for(let face of uvs){

            let newFace = [];

            newFace.push( face[0].divide(new Vector2(100,100)) )
            newFace.push( face[1].divide(new Vector2(100,100)) )
            newFace.push( face[2].divide(new Vector2(100,100)) )

            newUvs.push(newFace)
        }

        geometry.faceVertexUvs[0] = newUvs
}