Threejs: назначить различные цвета для каждой вершины в геометрии

Question

Я хочу сделать собирание с помощью IdMapping в Three.js

Из-за проблем с производительностью у меня только одна огромная геометрия, рассчитанная следующим образом:

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

Как назначить разные цвета каждой вершине в моей геометрии?

Answer 1

Это должно быть geometry.vertexColors вместо geometry.colors (нажмите цвет на вершину).

И материал:

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

Answer 2

Этот код должен работать на three.js V49, создавая RGB цветовой куб.

(относящиеся к 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

Я использую версию 71. Lee's answer вероятно, все еще работает, но, казалось, очень запутанным.

Вот самый простой пример, который я мог бы сделать изготовления Mesh с отдельными цветами, присвоенных каждой вершине:

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

Надеюсь, этот ответ менее страшен вид.

Это отстой, что цвета назначаются вершинам лица вместо вершин геометрии, так как это означает, что вам придется устанавливать их повторно. Лично у меня просто будет слой поверх Three.js, чтобы вместо этого я мог назначать цвета геометрии.