Three.js：为 BufferGeometry 设置索引/索引的正确方法？

我正在尝试在 BufferGeometry 中设置每个面的 UV 索引。

我从几何开始。我的几何体的每个面都有一个face.materialIndex对应于紫外线指数。我正在尝试将其转换为 BufferGeometry，然后映射到face.materialIndex to the BufferGeometry.

这是我到目前为止所拥有的：

// Convert geometry > buffergeometry
const bufGeo = new BufferGeometry().fromGeometry( geometry );

// Get an array of all the original geometry's indices...
const faceIndices = geometry.faces.map( face => face.materialIndex );

// Build a new array with the indices...
const indices = new Uint16Array( faceIndices );

// Apply to the BufferGeometry
bufGeo.setIndex( new BufferAttribute( indices, 1 ) );

现在这似乎破坏了我的网格并使其根本无法绘制。我究竟做错了什么？

顺便说一句，在幕后，当 Geometry 转换为 BufferGeometry 时，Three.js 首先将其置于称为 a 的中间格式中DirectGeometry。这用于复制索引，但是由于 Doob 先生在本次提交中未知的原因而将其删除 https://github.com/mrdoob/three.js/commit/ed0b2eafe895de62bd5dbe63db14501f28647573#diff-f0786190348a02468cbe264506044e6cL302。现在，Three 似乎在 Geo > BufGeo 转换中完全放弃了索引。

我还尝试使用该提交中的代码（修改为使用 setIndex）：

const indices = new Uint16Array( faceIndices.length * 3 );
bufGeo.addAttribute( 'index', new BufferAttribute( indices, 1 ).copyIndicesArray( faceIndices ) );

但我也有同样的问题。生成的网格被破坏。

The setIndex函数用于指定引用 BufferGeometry 上顶点属性缓冲区的三角形索引。在您的示例中，您将三角形索引数组设置为从materialIndex每一张脸。

MaterialIndex 对应于材质数组中用于渲染该三角形的材质，而不是 UV 索引。来自Face3 文档 https://threejs.org/docs/#api/core/Face3:

materialIndex —（可选）与面关联的材质数组的索引。

很有可能的是materialIndex对于每个面来说，它都是零，除非你做了一些改变，这可以解释为什么你的模型停止绘制（面上的顶点都是相同的）。

这行是你的问题：

// Get an array of all the original geometry's indices... const faceIndices = geometry.faces.map( face => face.materialIndex );

还需要注意的是，通过这种方式生成数组，您将获得属性所需数量的 1/3 数组元素，因为每个面有 3 个顶点。

可能的解决方案

• 如果您希望使用不同的材质渲染每个面，如materialIndex对应，那么我会调查BufferGeometry 组 https://threejs.org/docs/#api/core/BufferGeometry.groups

• 如果你想实际为 BufferGeometry 生成自定义 UV 坐标，我会研究一下缓冲区属性 https://threejs.org/docs/#api/core/BufferAttribute和BufferGeometry.addAttribute https://threejs.org/docs/#api/core/BufferGeometry.addAttribute函数添加新的 UV 属性。

希望有帮助！