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

【问题标题】：Preserve UV map when using mesh merge in Three.js在 Three.js 中使用网格合并时保留 UV 贴图
【发布时间】：2016-04-07 15:06:24
【问题描述】：

我目前正在关注 Jerome Etienne 的 this tutorial 使用 Three.js 生成程序城市。本教程使用 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 贴图，我需要进行哪些更改或采取不同的措施？

【问题讨论】：

标签： three.js uv-mapping

【解决方案1】：

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

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

【讨论】：