CODEWITHSUNDEEP
three.jstextures
kochumvk
kochumvk

Reputation: 53

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

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. enter image description here

Texture used:

enter image description here

texture file is a 512 x 512 px jpeg file.

Upvotes: 1

Views: 1791

Answers (2)

PowerAktar
PowerAktar

Reputation: 2428

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
}

Upvotes: 0

WestLangley
WestLangley

Reputation: 104763

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

Upvotes: 1

Related Questions