Threejs: asignar diferentes colores a cada vértice en una geometría

Question

quiero hacer recogiendo a través de IdMapping en Three.js

Debido a problemas de rendimiento sólo tengo una enorme geometría, calculada así:

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

¿Cómo puedo asignar diferentes colores a cada vértice en mi geometría?

Answer 1

Tiene que ser geometry.vertexColors en lugar de geometry.colors (presionar un color por vértice).

Y el material:

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

Answer 2

Este código debe trabajar para Three.js V49, la creación de un cubo de color RGB.

(Relacionado con 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 < cubeGeometry.vertices.length; i++) 
{ 
    point = cubeGeometry.vertices[ i ]; 
    color = new THREE.Color(0xffffff); 
    color.setRGB(0.5 + point.x/size, 0.5 + point.y/size, 0.5 + point.z/size); 
    cubeGeometry.colors[i] = color; // use this array for convenience 
} 

// copy the colors to corresponding positions 
//  in each face's vertexColors array. 
for (var i = 0; i < cubeGeometry.faces.length; i++) 
{ 
    face = cubeGeometry.faces[ i ]; 
    numberOfSides = (face instanceof THREE.Face3) ? 3 : 4; 
    for(var j = 0; j < numberOfSides; j++) 
    { 
     vertexIndex = face[ faceIndices[ j ] ]; 
     face.vertexColors[ j ] = cubeGeometry.colors[ vertexIndex ]; 
    } 
} 

cube = new THREE.Mesh(cubeGeometry, vertexColorMaterial); 

Answer 3

estoy usando la versión 71. Lee's answer probablemente todavía funciona, pero parecía muy complicado.

Aquí está el ejemplo más simple que podía hacer de hacer una Mesh con colores individuales asignadas a cada vértice:

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

Esperemos que esta respuesta es menos aterradora buscando.

Es una mierda que los colores se asignan a los vértices de la cara en lugar de los vértices de la geometría, ya que esto significa que tendrá que configurarlos de forma repetida. Personalmente, voy a tener una capa encima de Three.js para poder asignar colores a la geometría.