合并网格上的均匀纹理

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 以使 UV 连续，然后设置 uvsNeedUpdate

Answer 2

只为社区服务。这是我用来修复它的功能。在 mergeMeshes() 之后调用它。

function assignUVs(geometry) {
 geometry.computeBoundingBox();

 var max = geometry.boundingBox.max, min = geometry.boundingBox.min;
 var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
 var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
 var faces = geometry.faces;
 var vertices = geometry.vertices;

 geometry.faceVertexUvs[0] = [];
 for (var i = 0, il = faces.length; i < il; i++) {
  var v1 = vertices[faces[i].a], v2 = vertices[faces[i].b], v3 = vertices[faces[i].c];

  geometry.faceVertexUvs[0].push([
   new THREE.Vector2((v1.x + offset.x) / range.x, (v1.y + offset.y) / range.y),
   new THREE.Vector2((v2.x + offset.x) / range.x, (v2.y + offset.y) / range.y),
   new THREE.Vector2((v3.x + offset.x) / range.x, (v3.y + offset.y) / range.y)
  ]);
 }
 geometry.uvsNeedUpdate = true;
}

合并网格上的均匀纹理

Uniform texture on merged mesh

javascript

three.js

texture-mapping