Javascript Threejs：为几何体中的每个顶点指定不同的颜色

我想在Three.js中通过IdMapping进行拾取

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

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

for（变量i=0；i

---

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

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

材料：

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

---

此代码适用于three.js v49，创建RGB颜色立方体

（有关）

//此材质使网格使用指定给顶点的颜色
var vertexColorMaterial=新的3.MeshBasicMaterial（{vertexColors:THREE.vertexColors}）；
变量颜色、点、面、边数、顶点索引；
//面使用字符索引
var FaceIndexs=['a'，'b'，'c'，'d']；
变量大小=100；
var cubeGeometry=新的三个。cubeGeometry（大小，大小，大小）；
//首先，根据需要为顶点指定颜色
对于（var i=0；i

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

下面是我能做的一个最简单的例子，用分配给每个顶点的单独颜色制作一个

网格

：

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上加一个图层，这样我就可以为几何体指定颜色。

至少对我来说，我只能在几何体的面上设置.VertexColor，比如geometry.faces[0]。VertexColor[0]=…在最新版本的Three中可能已经更改。你用的是哪个版本？我用的是当前版本？版本R49此答案中的代码适用于哪个版本的three.js？Lee Stemkoski，当时它适用于当前版本。不确定是哪一个，只需查看更改日志即可？：-）请注意，如果更改现有几何体，则必须使用

geometry.colorsNeedUpdate=true

。这是我在stackoverflow上找到的Three.js r73的唯一工作方式。不过需要注意的是：您也可以事先准备一个包含3种颜色的数组，并将其作为第5个参数传递给Face3构造函数，而不是直接分配face.vertexColors[x]。@mrTrusty-第三个选项是在创建面后分配该数组：

face.vertexColors=[new THREE.Color（0xff0000），new THREE.Color（0x00ff00）新三种颜色（0x0000ff）]
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);