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

Question

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

我从几何开始。我的几何体的每个面都有一个face.materialIndex对应的 UV 指数。我正在尝试将其转换为 BufferGeometry，然后将其映射face.materialIndex到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 首先将其置于称为DirectGeometry. 这用于复制索引，但由于 Doob 先生在本次提交中未知的原因而被删除。现在，Three 似乎在 Geo > BufGeo 转换中完全放弃了索引。

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

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

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

Answer 1

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

\n\n

MaterialIndex 对应于材质数组中用于渲染该三角形的材质，而不是 UV 索引。来自Face3 文档：

\n\n

\n

materialIndex \xe2\x80\x94 （可选）与面关联的材质数组的索引。

\n

\n\n

很有可能是这样materialIndex除非您做了一些更改，否则每个面的该值很

\n\n

这行是你的问题：

\n\n

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

\n\n

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

\n\n

可能的解决方案

\n\n

\n

• 如果您希望使用不同的材质渲染每个面（如materialIndex对应的那样），那么我会研究BufferGeometry 组

\n

• 如果您想实际为 BufferGeometry 生成自定义 UV 坐标，我会研究BufferAttributes和BufferGeometry.addAttribute函数来添加新的 UV 属性。

\n

\n\n

希望有帮助！

\n