Javascript Threejs：为几何中的每个顶点分配不同的颜色

Threejs: assign different colors to each vertex in a geometry

提问by Stefan Ramson

I want to do picking via IdMapping in Three.js

我想通过 Three.js 中的 IdMapping 进行采摘

Because of performance issues I only have one huge geometry, computed like this:

由于性能问题，我只有一个巨大的几何图形，计算如下：

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

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

如何为几何中的每个顶点指定不同的颜色？

采纳答案by sole

It has to be geometry.vertexColors instead of geometry.colors (push a colour per vertex).

它必须是 geometry.vertexColors 而不是 geometry.colors （每个顶点推一个颜色）。

And the material:

和材料：

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

回答by ArtOfWarfare

I'm using version 71. Lee's answerprobably still works, but seemed very convoluted.

我使用的是 71 版。Lee 的回答可能仍然有效，但似乎非常复杂。

Here's the simplest example I could do of making a Meshwith individual colors assigned to each vertex:

这是我可以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);

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.

将颜色分配给面的顶点而不是几何体的顶点有点糟糕，因为这意味着您必须重复设置它们。就个人而言，我将在 Three.js 之上添加一个层，以便我可以为几何图形指定颜色。

回答by Lee Stemkoski

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

此代码应该适用于 Three.js v49，创建一个 RGB 颜色立方体。

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

（与如何在 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 );