I am currently working on editing a program that uses Three.js and Tween.js. Despite my efforts to find a solution both here and online, I have not been successful. The program involves creating multiple objects (cones) using THREE.Mesh, with a script that selects one of these objects every 5 seconds and temporarily changes its dimensions. However, I am facing difficulties when trying to change the color of the selected object only, as the color change affects all objects instead.
Below is the code snippet used to create the objects:
VIS.createCityMarkers = function( cities ){
var material = new THREE.MeshPhongMaterial({
color: 0xffdb85,
specular: 0xff6c00,
shininess: 3,
shading: THREE.FlatShading
});
var baseMesh = new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0.0, 0.4, 32, 1 ), material );
baseMesh.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( -Math.PI * 0.5 ) );
var cityLookup = {};
var group = new THREE.Group();
_.each( cities, function( cc, name ){
var g = new THREE.Group();
var m = baseMesh.clone();
g.add( m );
var p = Coordinates.latLongToVector3( cc.lat, cc.long + 90, 10.8 );
g.position.copy( p );
g.lookAt( group.position );
m.name = name;
group.add( g );
cityLookup[ name ] = m;
});
Here is the function responsible for changing the dimension of the selected object (m):
function highlightCityMesh(m){
var s = {
scale: 1.0,
up: 0.0,
color: 0xffdb85
};
new TWEEN.Tween( s )
.to({
scale: 3.0,
up: 2.0,
color: 0xc00000
}, 2000 )
.easing( TWEEN.Easing.Elastic.Out )
.onUpdate( function(){
m.scale.set( s.scale, s.scale, s.scale );
m.position.z = -s.up;
m.material.color.setHex(s.color);
})
.start();
m.update = function(){
this.rotation.z = Date.now() * 0.001;
};
}
Thank you