Three.js what does “indices of faces” mean and how does it work?

Question

I am trying to create an irregular polyhedron with Three.js. I am using the PolyhedronGeometry ( documentation ) for that. The problem is I do not quite understand what

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

means. Therefore, the irregular tetrahedron, that I have created in this JSfiddle , has not all faces closed as it should have.

How can this be achieved?

This is the way I am currently trying to create the tetrahedron:

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

When generating an index buffer, you have to ensure that the order of the indices is correct so faces point outwards the geometry. You can easily illustrate the issue by setting the side property of the corresponding material to THREE.DoubleSide .

Answer 2

Indexed vertex buffers let you store more model data in a smaller space.

Instead of storing 3 vertices per triangle, you can share the vertices across multiple triangles, since in most meshes.. each vertex is shared by 3 or more triangles, this ends up being a pretty big win, and makes the model rendering more performant as well since the vertices have a better chance of being in the vertex cache.

To get proper face culling/outward normal generation, you need to declare the vertex indices in a clockwise order as if your were looking directly at the face from outside the model.

In practice.. if you're generating these models by hand, you do your best effort on graph paper or whatever, then look at how it displays.. figure out which faces aren't facing correctly, and then flip the indices of those faces, so if it's 1,2,3 for instance, change it to 3,2,1 to flip the normal.

FWIW: it's your 1,2,3, face that is backwards. it should be 3,2,1 or 2,1,3 or 1,3,2 ;D