Threejs: assign different colors to each vertex in a geometry

Question

I want to do picking via IdMapping in Three.js

Because of performance issues I only have one huge geometry, computed like this:

for (var i = 0; i < numberOfVertices; i += 9) {   p1  = new THREE.Vector3(graphData.triangles.vertices[i+0], graphData.triangles.vertices[i+1], graphData.triangles.vertices[i+2]);   p2  = new THREE.Vector3(graphData.triangles.vertices[i+3], graphData.triangles.vertices[i+4], graphData.triangles.vertices[i+5]);   p3  = new THREE.Vector3(graphData.triangles.vertices[i+6], graphData.triangles.vertices[i+7], graphData.triangles.vertices[i+8]);   geometry.vertices.push(new THREE.Vertex( p1.clone() ));   geometry.vertices.push(new THREE.Vertex( p2.clone() ));   geometry.vertices.push(new THREE.Vertex( p3.clone() ));   geometry.faces.push( new THREE.Face3( i/3, i/3+1, i/3+2 ) );    // i want to do something like this:   geometry.colors.push(new THREE.Color(0xFF0000));   geometry.colors.push(new THREE.Color(0xFF0000));   geometry.colors.push(new THREE.Color(0xFF0000));  }  geometry.computeFaceNormals(); var material = new THREE.MeshBasicMaterial({});  var triangles = new THREE.Mesh( geometry, material ); scene.add(triangles); 

How can I assign different colors to each vertex in my geometry?

Answer 1

It has to be geometry.vertexColors instead of geometry.colors (push a colour per vertex).

And the material:

material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors }); 

Answer 2

I'm using version 71. Lee's answer probably still works, but seemed very convoluted.

Here's the simplest example I could do of making a Mesh with individual colors assigned to each vertex:

var geometry = new THREE.Geometry();  // Make the simplest shape possible: a triangle. geometry.vertices.push(     new THREE.Vector3(-10,  10, 0),     new THREE.Vector3(-10, -10, 0),     new THREE.Vector3( 10, -10, 0) );  // Note that I'm assigning the face to a variable // I'm not just shoving it into the geometry. var face = new THREE.Face3(0, 1, 2);  // Assign the colors to the vertices of the face. face.vertexColors[0] = new THREE.Color(0xff0000); // red face.vertexColors[1] = new THREE.Color(0x00ff00); // green face.vertexColors[2] = new THREE.Color(0x0000ff); // blue  // Now the face gets added to the geometry. geometry.faces.push(face);  // Using this material is important. var material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});  var mesh = new THREE.Mesh(geometry, material); 

Hopefully this answer is less terrifying looking.

It kind of sucks that the colors are assigned to the vertices of the face instead of the vertices of the geometry, as this means you'll have to set them repeatedly. Personally, I'm just going to have a layer on top of Three.js so that I can assign colors to geometry instead.