javascript - Three.js "indices of faces"是什么意思，它是如何工作的？

Question

我正在尝试使用 Three.js 创建一个不规则多面体。我正在使用 PolyhedronGeometry ( documentation )。问题是我不太明白是什么

indices — Array of indices that make up the faces of the form [0,1,2, 2,3,0, ... ]

意味着。因此，我在此 JSfiddle 中创建的不规则四面体, 并没有像它应该的那样关闭所有的面孔。

如何实现？

这是我目前尝试创建四面体的方式:

var verticesOfCube = [-1,-1,-1,    1,-2.5,1,    1, 1,-1,    -1, 1,-1];
var indicesOfFaces = [2,1,0,    0,3,2,  3,2,1,    1,3,0];

// geometry
var geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 10, 0 );

// material
var material1 = new THREE.MeshPhongMaterial( {
    color: 'sandybrown'
} );

// mesh
mesh = new THREE.Mesh( geometry, material1 );
mesh.position.set( 0, 0, 0 );
scene.add( mesh );

Answer 1

索引顶点缓冲区让您可以在更小的空间中存储更多的模型数据。

您可以跨多个三 Angular 形共享顶点，而不是每个三 Angular 形存储 3 个顶点，因为在大多数网格中......每个顶点由 3 个或更多三 Angular 形共享，这最终是一个相当大的胜利，并使模型渲染性能也更高，因为顶点更有可能出现在顶点缓存中。

要获得正确的面部剔除/向外法线生成，您需要按顺时针顺序声明顶点索引，就好像您是从模型外部直接看面部一样。

在实践中..如果您手动生成这些模型，您会尽最大努力在方格纸或其他任何东西上，然后看看它是如何显示的..找出哪些面没有正确面对，然后翻转这些面的索引，因此如果它是 1,2,3，例如，将其更改为 3,2,1 以翻转法线。

FWIW:这是你的 1、2、3，脸向后。它应该是 3,2,1 或 2,1,3 或 1,3,2 ;D