My goal is to enhance the functionality of this code snippet so that when the button is clicked, the selected mesh's neighborhood vertex is highlighted with 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 attempting to implement the code examples provided by Mr. Stemkoski from this 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 facing challenges with the JavaScript closer property and uncertain about how to proceed from here. Any suggestions or guidance would be greatly appreciated. Thank you!