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

}

我正在尝试使用来自link 的 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

如果你想给顶点添加颜色，你必须在面中设置the vertexColors array。 在您粘贴的示例代码中，它也是这样做的，但是您在自己的示例中错过了这段代码。所以你应该添加：

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 ];
    }
}