javascript - 合并网格上的均匀纹理

Question

如何使几何体的合并网格一次性纹理化，而不是 3 个？在我的示例代码中，纹理是在每个单独的几何体上完成的(参见图像，点 1 和 2)。两个立方体和一个圆柱体。

使用的代码:

scene = new THREE.Scene();

var texture = new THREE.TextureLoader().load( '1-3-2-5-Bois.jpg' );
var mesh = [], no = 0;
var meshes = [];
var geometry = new THREE.CubeGeometry( 2, 10, 1 );
mesh[no] = new THREE.Mesh( geometry );
meshes.push(mesh[no]);
no++;

geometry = new THREE.CylinderGeometry( 0.5, 0.5, 10, 32 );
mesh[no] = new THREE.Mesh( geometry );
mesh[no].position.set( 1, 0, 0 );
mesh[no].rotation.x = 0;
mesh[no].rotation.y = Math.PI/2;
mesh[no].rotation.z = 0;
meshes.push(mesh[no]);
no++;

geometry = new THREE.CubeGeometry( 5, 10, 1 );
mesh[no] = new THREE.Mesh( geometry );
mesh[no].position.set( -3.5, 0, 0 );
meshes.push(mesh[no]);
no++;
geometry = mergeMeshes(meshes);

var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
...
function mergeMeshes (meshes) {
    var combined = new THREE.Geometry();
    for (var i = 0; i < meshes.length; i++) {
        meshes[i].updateMatrix();
        combined.merge(meshes[i].geometry, meshes[i].matrix);
    }
    return combined;
}

Answer 1

您需要确保合并的网格之间的 UV 匹配。该接缝是由于不同的对象具有不同的 UV 布局而造成的。您需要编辑创建的几何体上的faceVertexUvs或faceUvs，以便UVs是连续的，然后设置uvsNeedUpdate