0

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

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

Community
  • 1
  • 1
John Doe
  • 62
  • 11

1 Answers1

1

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 ];
    }
}
Wilt
  • 41,477
  • 12
  • 152
  • 203