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 贴图的方法：

创建n个数组，每个数组对应纹理的一个子图像，包含定义子图像边界的4个点。 (0, 0) 代表左下角，(1, 1) 代表右上角。
通过geometry.faceVertexUvs[0] = [];
将纹理的子图像映射到几何体的每个三角形面上。
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);

Three.js: 纹理加载不正确

Three.js: texture loaded unproperly

textures

three.js