Threejs: gán màu sắc khác nhau cho mỗi đỉnh trong một hình học

Question

tôi muốn làm hái qua IdMapping trong Three.js

Bởi vì vấn đề hiệu suất Tôi chỉ có một hình học rất lớn, tính toán như thế này:

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

Làm cách nào để gán các màu khác nhau cho mỗi đỉnh trong hình của tôi?

Answer 1

Nó phải là geometry.vertexColors thay vì geometry.colors (đẩy một màu trên mỗi đỉnh).

Và vật liệu:

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

Answer 2

Mã này nên làm việc cho three.js v49, tạo ra một khối màu RGB.

(Liên quan đến 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

Tôi đang sử dụng phiên bản 71. Lee's answer lẽ vẫn hoạt động, nhưng có vẻ rất phức tạp.

Dưới đây là ví dụ đơn giản nhất tôi có thể làm làm một Mesh với màu sắc cá nhân được gán cho mỗi đỉnh:

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

Hy vọng câu trả lời này là ít đáng sợ tìm kiếm.

Rất tiếc là các màu được gán cho các đỉnh của khuôn mặt thay vì các đỉnh của hình học, vì điều này có nghĩa là bạn sẽ phải đặt chúng liên tục. Cá nhân, tôi sẽ chỉ có một lớp trên đầu trang của Three.js để tôi có thể gán màu cho hình học thay thế.