21

我想通过 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);

如何为几何图形中的每个顶点分配不同的颜色？

4

3 回答 3

20

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

和材料：

material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
于 2012-04-26T11:31:14.877 回答
14

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

这是我可以做的最简单的例子，它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 之上添加一个图层，以便我可以将颜色分配给几何图形。

于 2015-08-07T22:35:29.990 回答
7

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

（与如何在 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 );
于 2012-08-10T16:59:15.413 回答