三.js:为缓冲区几何设置索引/索引的正确方法?

Question

我正在尝试在缓冲区几何中设置每个面的UV指数。

我从几何开始。我的几何图形的每个面都有一个对应于 UV 指数的face.materialIndex。我正在尝试将其转换为缓冲区几何，然后将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 ) );

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

顺便说一下，在引擎盖下，当几何转换为缓冲区几何时，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函数用于指定引用缓冲区几何体上的顶点属性缓冲区的三角形索引。在您的示例中，您将三角形索引数组设置为从每个面的materialIndex生成的数组。

materialIndex 对应于用于从材质数组(而不是 UV 索引(渲染该三角形的材质。从 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 的组

  。

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

希望对您有所帮助！