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 );

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 );

• javascript
• three.js

• 1 This is not the answer mind you, just proof that one of your faces has its normals flipped var material1 = new THREE.MeshPhongMaterial( { color: 'sandybrown', side:THREE.DoubleSide } ); – ippi Commented Jun 29, 2018 at 13:05
• I've thought about that, too. But I did not know it would be possible to do it so easily. Thanks – frankenapps Commented Jun 29, 2018 at 13:08
• The docs say "Array of indices that make up the faces of the form...". I would say "array of vertex indices that make up the faces of the form...". The length of indices is 3 x vertex_count. I would've also suggested calling it vertex_indices instead of indices – Ben Butterworth Commented Dec 29, 2022 at 23:45

2 Answers 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

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.