Which array is being indexed by the values in geometry.faces.materialIndex?

0
votes

I want to create my own mesh (THREE.js, using CanvasRenderer) by defining the geometry as a set of vertices and faces:

geometry = new THREE.Geometry();

...
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(1, 0, 0));
geometry.vertices.push(new THREE.Vector3(2, 0, 0));
...

...
geometry.faces.push(new THREE.Face3(1, 4, 3));
geometry.faces.push(new THREE.Face3(1, 2, 4));
geometry.faces.push(new THREE.Face3(3, 4, 5));
...

geometry.computeFaceNormals();

Because I want my mesh to have different color faces, I generate an array of materials. As I have read in some tutorials, I call this array geometry.materials:

geometry.materials = [
new THREE.MeshBasicMaterial({ color: 0xFF00A0 }),
new THREE.MeshBasicMaterial({ color: 0x00FF00 }),
new THREE.MeshBasicMaterial({ color: 0x0000FF }),
...
];

And then, I assign the indices to geometry.faces[i].materialIndex:

geometry.faces[0].materialIndex = 0;
geometry.faces[1].materialIndex = 2;
geometry.faces[2].materialIndex = 1;
...

Finally, I generate the mesh and add it to the scene:

mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
scene.add(mesh);

Well, this code is not working. All I get is an invisible mesh (no faces can be seen). My questions are:

  1. Is 'geometry.materials' the default variable name to define material arrays? Which array are the values in faces[i].materialIndex referring to?
  2. Why is my code not working?
1
three.js

1 Answers

1
votes

Tutorials are almost always out-of-date. Study the three.js examples instead.

If you are using tutorials, be sure to also check the Migration wiki: https://github.com/mrdoob/three.js/wiki/Migration.

Geometry no longer has a materials property.

Instead of adding the materials array to geometry, do this:

mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

three.js r.53