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

【问题标题】：Loaded texture appears blurred, or like a single color. How to make the texture crisp and sharp加载的纹理看起来很模糊，或者像单一颜色。如何使纹理清晰锐利
【发布时间】：2014-07-14 21:15:32
【问题描述】：

我正在使用 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 像素的 jpeg 文件。

【问题讨论】：

看起来你需要提供纹理坐标，否则没有。对不起，我不知道如何在three.js中做到这一点，但也许你可以搜索它。

标签： three.js textures

【解决方案1】：

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

你有两个选择。第一个选项是在回调函数中提供您自己的 UV 生成器。见源代码cmets。

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

three.js r.67

【讨论】：

【解决方案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
}

【讨论】：