three.js為幾何中的每個頂點分配不同的顏色（漸變）

Question

我正在嘗試修改以下代碼行，以便在單擊按鈕時，選定網格的鄰域頂點會以漸變效果着色。

function addSphere()
{
var position = new Array();
var notAboveGround = true;
while(notAboveGround){
    position[0]=Math.random()*floorSide-floorSide/2;
    position[1]=Math.random()*floorSide-floorSide/2;
    position[2]=Math.random()*floorSide/5;
    var sphereSide = Math.random()*floorSide/12+floorSide/50;
    //alert("cubeSide="+cubeSide);
    if(position[2]-sphereSide>0){
        notAboveGround = false;
    }
}

var faceColorMaterial = new THREE.MeshLambertMaterial( 
{ color: 0xffffff, vertexColors: THREE.FaceColors,shading:THREE.FlatShading,polygonOffset: true,polygonOffsetUnits: 1,polygonOffsetFactor: 1} );

// var sphereGeom= new THREE.SphereGeometry(sphereSide,0);
var sphereGeom = new THREE.SphereGeometry(80,10,10);
for ( var i = 0; i < sphereGeom.faces.length; i++ ) 
{
    face = sphereGeom.faces[ i ];   
    face.color= baseColor;      
}
var sphere= new THREE.Mesh( sphereGeom, faceColorMaterial );
sphere.position.set(0, 150, 0);
// creates a wireMesh object
wireSphere = new THREE.Mesh(sphereGeom, new THREE.MeshBasicMaterial({ color: 0x116611, wireframe: true }));

scene.add(sphere);
// wireMesh object is added to the original as a sub-object
sphere.add(wireSphere );

targetList.push(sphere);

}

我正在嘗試使用Stemkoski先生的鏈接中的代碼示例：

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

但是，我在javascript close屬性中掙扎，並且不確定如何從此處開始。 任何建議，將不勝感激。 謝謝！

Answer 1

如果要向頂點添加顏色，則必須在面上設置vertexColors數組 。 在示例代碼中，您粘貼的代碼也是如此，但是您在自己的示例中錯過了這段代碼。 因此，您應該添加：

var numberOfSides, j, vertexIndex;

for ( var i = 0; i < sphereGeom.faces.length; i++ ) 
{
    face = sphereGeom.faces[ i ];   
    face.color= baseColor;      
    numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
    for( j = 0; j < numberOfSides; j++ ) 
    {
        vertexIndex = face[ faceIndices[ j ] ];
        face.vertexColors[ j ] = sphereGeom.colors[ vertexIndex ];
    }
}