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

Question

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

我从几何开始。我的几何体的每个面都有一个与 UV 索引相对应的 face.materialIndex。我正在尝试将其转换为 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 的中间格式中。这用于复制索引，但是 it was removed for reasons unknown in this commit by Mr Doob 。现在，三似乎在 Geo > BufGeo 转换中完全放弃索引。

我还尝试使用该提交中的代码(修改为使用 setIndex):

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

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

Answer 1

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

materialIndex 对应于 Material 数组中用于渲染该三角形的 Material ，而不是 UV 索引。来自 Face3 documentation :

materialIndex — (optional) which index of an array of materials to associate with the face.

每个面的 materialIndex 很可能为零，除非您做了一些更改，这可以解释为什么您的模型停止绘制(面上的顶点都是相同的) )。

这一行是你的问题:

//获取所有原始几何体索引的数组...
constfaceIndices=geometry.faces.map(face=>face.materialIndex);


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

可能的解决方案

• 如果您希望使用不同的 Material 渲染每个面(如 materialIndex 所对应的那样)，那么我会查看 groups for BufferGeometry

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

希望有帮助!