在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地圖的規格是根據教程。具體來說，

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

和​​創建如下（在for循環中，其中n是建築物的數量），

var buildingMesh = new THREE.Mesh(geometry); 

什麼我需要改變或爲了什麼不同爲合併網格尊重幾何的UV地圖？

Answer 1

這是一個使用最新的three.js版本（v79）。從你的代碼，我看不出我的更新與你的不同，但是所有的屋頂都能正確渲染：

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