Threejs: assign different colors to each vertex in a geometry

问题:

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 

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

回答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 }); 

回答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.

回答3:

This code should work for three.js v49, creating an RGB color cube.

(Related to How to change face color in Three.js)

// this material causes a mesh to use colors assigned to vertices var vertexColorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );  var color, point, face, numberOfSides, vertexIndex;  // faces are indexed using characters var faceIndices = [ 'a', 'b', 'c', 'd' ];  var size = 100; var cubeGeometry = new THREE.CubeGeometry( size, size, size );  // first, assign colors to vertices as desired for ( var i = 0; i 

文章来源: Threejs: assign different colors to each vertex in a geometry