加载的纹理看起来模糊，或像单一颜色。如何使纹理清晰锐利

Question

我使用three.js来制作一些基本的3D，我正在加载一个jpeg图像作为纹理应用于客户几何图形，如下所示：

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;

而不是尖锐的草纹，它看起来像一个模糊/平坦的绿色填充。

使用的纹理：

纹理文件是512 x 512 px jpeg文件。

Answer 1

ExtrudeGeometry最初用于文字。如果查看它生成的UV，它会使用UV顶点位置的x和y分量。在您的情况下，这些值超出范围[0,1]。

您有两种选择。第一个选项是在回调函数中提供自己的UV生成器。请参阅源代码注释。

或者，将形状坐标除以​​1000，使它们位于[0,1]范围内。然后对网格应用缩放：mesh.scale.set( 1000, 1000, 1 );

three.js r.67

Answer 2

仅以WestLangleys答案为基础，类似下面的函数就可以工作：

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
}