web-dev-qa-db-ja.com

Threejs：ジオメトリの各頂点に異なる色を割り当てます

Three.jsのIdMappingでピッキングを行いたい

パフォーマンスの問題のため、次のように計算された巨大なジオメトリは1つしかありません。

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

ジオメトリの各頂点に異なる色を割り当てるにはどうすればよいですか？

javascriptwebglthree.jspicking
19
Stefan Ramson

これは、geometry.colorsではなく、geometry.vertexColorsにする必要があります（頂点ごとにカラーをプッシュ）。

そして素材：

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

私はバージョン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の上にレイヤーを配置して、代わりにジオメトリに色を割り当てることができるようにします。

11
ArtOfWarfare

このコードは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 );
7
Lee Stemkoski