Three.js：纹理加载不正确

Question

我使用一些数据在three.js中创建一个模型。它可以加载纹理，但有一个奇怪的问题。我是这样加载纹理的。

`function createMesh(geom, imageFile){
     var loader = new THREE.TextureLoader();
     texture = loader.load(imageFile); 
     var mat = new THREE.MeshLambertMaterial({
         side: THREE.DoubleSide, 
     });
    mat.map = texture;
    var mesh = new THREE.Mesh(geom, mat);
    return mesh;}
var geom = new THREE.Geometry();
    geom.vertices = vertices;
    geom.faces = faces;
    geom.computeFaceNormals();
    var myModel = createMesh(geom, './tex1.jpg');
    scene.add(myModel);`  

这是加载纹理前的截图。

这是加载纹理后的截图。

我的纹理文件(2048*2048.jpg)

我已经测试过在一个普通的立方体中加载纹理，它可以工作。所以我想不通为什么我的模型中不能加载纹理。有什么建议吗？

Answer 1

对于Three.js中的自定义几何体，我们需要做UV映射来定义纹理如何映射到几何体上。

首先，通过以下方式加载纹理 var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('texture.jpg') } );

然后我是这样做UV贴图的。

1. 创建n个arrarys，每个arrarys对应一个纹理的子图像，包含4个点，它们定义了子图像的边界，（0，0）代表左下角，（1，1）代表右上角。(0, 0)代表左下角，(1, 1)代表右上角。

2. 通过以下方式清除现有的UV贴图 geometry.faceVertexUvs[0] = [];

3. 将纹理的子图像映射到几何体的每个三角形面。

   geometry.faceVertexUvs[0][0] = [ sub_image_1[0], sub_image_1[1], sub_image_1[3] ];
    geometry.faceVertexUvs[0][1] = [ sub_image_1[1], sub_image_1[2], sub_image_1[3] ];

最后： mesh = new THREE.Mesh(geometry, material);