javascript - 如何将面添加到索引 THREE.BufferGeometry？

Question

假设我从名为 oldGeom 的 THREE.Geometry 生成了一个 THREE.BufferGeometry，如下所示:

// using WebGLRenderer
var geometry = new THREE.BufferGeometry();
var indices = new Uint16Array(oldGeom.vertices.length);
var vertices = new Float32Array(oldGeom.vertices.length * 3);
for (var i = 0; i < oldGeom.vertices.length; i++) {
    indices[i] = i;
    vertices[i * 3 + 0] = oldGeom.vertices[i].x;
    vertices[i * 3 + 1] = oldGeom.vertices[i].y;
    vertices[i * 3 + 2] = oldGeom.vertices[i].z;
}
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

希望我的索引正确。此时，我如何使用索引添加脸部？我计划循环遍历 oldGeom 的各个面，将它们全部添加到此处，但我找不到任何相关文档。谢谢!

类似于this question ，但具有索引几何图形。

Answer 1

来自the documentation for BufferGeometry:

index (itemSize: 3)

Allows for vertices to be re-used across multiple triangles; this is called using "indexed triangles," and works much the same as it does in Geometry: each triangle is associated with the index of three vertices. This attribute therefore stores the index of each vertex for each triangular face. If this attribute is not set, the renderer assumes that each three contiguous positions represent a single triangle.

“索引三 Angular 形”的工作方式是“位置”是一组数字，每组连续的 3 个数字代表一个顶点 (x, y, z)。 “Index”是一个数字数组，其中每组连续的 3 个数字代表一个面，通过引用“position”数组中顶点的索引。

你可能有一个像这样的顶点数组:

var vertices = [0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0];

您可以将此数组视为 XYZ 坐标集，如下所示:

var vertices = [
    0, 0, 0, // vertex index 0
    1, 0, 0, // vertex index 1
    1, 1, 0, // vertex index 2
    0, 1, 0  // vertex index 3
];

现在，如果您有一个像这样的索引数组:

var indices = [0, 1, 2, 1, 2, 3];

它代表两个三 Angular 形:

var indices = [
    0, 1, 2, // face with vertices at indices 0, 1, 2
    1, 2, 3  // face with vertices at indices 1, 2, 3
];

因此三 Angular 形 #1 的顶点位于 XYZ (0, 0, 0), (1, 0, 0), (1, 1, 0)，而三 Angular 形 #2 的顶点位于 XYZ (1, 0, 0)， (1, 1, 0), (0, 1, 0)。

另一方面，您可以在不使用索引的情况下定义顶点。索引的强大之处在于，它允许您重用数组中定义的顶点，而不是每次出现在三 Angular 形中时都冗余地列出它们。如果您有一个数组 vertices，那么很简单，数组中的每组 9 个数字都是一个三 Angular 形(三组连续的顶点，每组都有三个连续的 XYZ 值)。

回到你原来的问题，如果你想向 BufferedGeometry 添加三 Angular 形，我看到两个基本选项:

1. 将三 Angular 形添加到原始 oldGeom 对象中，然后进行转换。与 BufferGeometry 相比，向 Geometry 添加三 Angular 形要容易得多。请记住，BufferGeometry 的全部要点是它不应该改变!您还可以利用 .fromGeometry()，因为新面已在 oldGeom 中定义。
2. 创建一个大于原始索引所需的 indices 数组，并在其中手动定义三 Angular 形。如果您定义的新顶点不存在于顶点数组中，那么您也必须将它们添加到其中。屁股好痛啊。