在Three.js中使用网格合并时保留UV贴图

Question

我目前正在关注Jerome Etienne关于使用Three.js生成过程城市的this tutorial。本教程使用的是Three.js的59版，而我使用的是73版。

问题来自本教程中的这一行，

THREE.GeometryUtils.merge( cityGeometry, buildingMesh );

该方法不再可用。根据该answer实现这一点的新方法是，

buildingMesh.updateMatrix();
cityGeometry.merge( buildingMesh.geometry, buildingMesh.matrix );

但是，当我执行此操作时，UV贴图中屋顶的位置会发生变化。

这是我单独渲染建筑物时的外观。

​

这是我合并它们时的样子。请注意UV贴图中的屋顶位置。

​

屋顶的UV贴图的规格取决于教程。具体来说，

geometry.faceVertexUvs[0][4][0].set( 0, 0 );
geometry.faceVertexUvs[0][4][1].set( 0, 0 );
geometry.faceVertexUvs[0][4][2].set( 0, 0 );
geometry.faceVertexUvs[0][5][0].set( 0, 0 );
geometry.faceVertexUvs[0][5][1].set( 0, 0 );
geometry.faceVertexUvs[0][5][2].set( 0, 0 );

并且如下创建buildingMesh (在for循环中，其中n是建筑物的数量)，

var buildingMesh = new THREE.Mesh( geometry );

为了使合并的网格符合几何体的UV贴图，我需要进行哪些更改或执行哪些操作？

Answer 1

这里是使用最新three.js版本(v79)的一个。从你的代码中，我看不出我的更新和你的有什么不同，但是所有的屋顶都被正确渲染了：

https://codepen.io/Sphinxxxx/pen/WrbvEz?editors=0010