三.js 为几何中的每个顶点分配不同的颜色(渐变) [英] three.js assigning different colors (gradients) to each vertex in a geometry

问题描述

我正在尝试修改以下代码行，以便在单击按钮时，所选网格的邻域顶点 会以渐变效果着色.

I am trying to modify the following lines of code so when the button is clicked the neighborhood vertex of the selected mesh gets colored in a gradient effect.

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

}

我正在尝试使用来自 链接 :

I am trying to use the code samples by Mr. Stemkoski from link :

// 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 更接近属性而苦苦挣扎，不知道如何从这里开始.任何建议，将不胜感激.谢谢！

However, I am struggling with the javascript closer property and not sure how to start from here. Any suggestions would be appreciated. Thanks!

推荐答案

如果你想给顶点添加颜色，你必须设置 人脸中的顶点颜色数组.在您粘贴的示例代码中，它也是这样做的，但是您在自己的示例中错过了这段代码.所以你应该添加:

If you want to add color to the vertex you have to set the vertexColors array in the face. In the example code you pasted it is also done like that but you miss this piece of code inside your own example. So you should add:

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

这篇关于三.js 为几何中的每个顶点分配不同的颜色(渐变)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！