Threejs: assegnare colori diversi per ogni vertice in una geometria

Question

voglio fare la raccolta tramite IdMapping in Three.js

A causa di problemi di prestazioni ho solo una geometria enorme, calcolato in questo modo:

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

Come posso assegnare colori diversi a ciascun vertice nella mia geometria?

Answer 1

Deve essere geometry.vertexColors anziché geometry.colors (spingere un colore per vertice).

E il materiale:

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

Answer 2

Questo codice dovrebbe funzionare per Three.js V49, la creazione di un cubo di colore RGB.

(Relativo a 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

Sto utilizzando la versione 71. Lee's answer funziona probabilmente ancora, ma sembrava molto contorto.

Ecco l'esempio più semplice che potevo fare di fare un Mesh con i singoli colori assegnati a ciascun vertice:

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

Speriamo che questa risposta è meno terrificante cercando.

È una specie di risucchio che i colori siano assegnati ai vertici della faccia anziché ai vertici della geometria, poiché ciò significa che dovrete impostarli ripetutamente. Personalmente, ho intenzione di avere un livello sopra a Three.js in modo da poter assegnare i colori alla geometria.