Javascript 合并网格上的均匀纹理

如何从几何体中创建合并网格，使其在一次和平中而不是在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;
}

scene=new THREE.scene（）；
var texture=new THREE.TextureLoader（）.load（'1-3-2-5-Bois.jpg'）；
var-mesh=[]，no=0；
var=[]；
var几何=新的三立方测量法（2,10,1）；
网格[no]=新的三个网格（几何体）；
mesh.push（mesh[no]）；
否++；
几何=新的三个圆柱几何（0.5,0.5,10,32）；
网格[no]=新的三个网格（几何体）；
网格[no].position.set（1,0,0）；
网格[no].旋转.x=0；
网格[no].rotation.y=Math.PI/2；
网格[no]。旋转。z=0；
mesh.push（mesh[no]）；
否++；
几何=新的三个。立方计量法（5，10，1）；
网格[no]=新的三个网格（几何体）；
网格[no].position.set（-3.5,0,0）；
mesh.push（mesh[no]）；
否++；
几何体=合并网格（网格）；
var material=new THREE.MeshBasicMaterial（{map:texture}）；
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
...
函数合并网格（网格）{
var combined=新的三个几何体（）；
对于（var i=0；i

您需要确保合并网格之间的UV匹配。该接缝是由不同对象具有不同UV布局这一事实造成的。您需要在创建的几何体上编辑面顶点UV或面UV，以便UV是连续的，然后仅为社区设置uvsNeedUpdate。这里是我用来修复它的函数。在mergemesh（）之后调用它

函数赋值UV（几何体）{
geometry.computeBoundingBox（）；
var max=geometry.boundingBox.max，min=geometry.boundingBox.min；
var偏移=新的三个矢量2（0-min.x，0-min.y）；
var范围=新的三个矢量2（最大x-最小x，最大y-最小y）；
var faces=geometry.faces；
var顶点=geometry.vertices；
geometry.faceVertexUvs[0]=[]；
对于（var i=0，il=faces.length；i

是的，这就成功了。此外，我们可以将图像/纹理旋转90度吗？只需翻转U和V坐标即可。那会产生旋转90度的效果，很好。但现在我有一个问题，UV没有使用正确的边纹理值，最糟糕的是，圆柱体。我发现这项技术使用曲面法线，但它不起作用。()

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;
}