How to change material color for only one object in THREE.js

Question

I'm editing a program wrote in Three.js and Tween.js. I try to find the solution here and on the web, without results. I have a lot of object (cones) create by THREE.Mesh and there is a little script that every 5 second select one of these and change, for few time, its dimension. I would like change also the color, but i have some problems. If i try to change the color, this change for every object, but i want that change only for the object selected by the script.

this is the code 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;
});

This is the function that change the dimension of 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

score 5 · Accepted Answer · answered Nov 19 '15 at 14:35

5

You are making clones of one cone. During cloning meshes share link to one material. If you need to change colors of shapes separately then you need to clone a material for each object also. It think that should be enough:

var m = baseMesh.clone();
m.material = baseMesh.material.clone();

answered Nov 19 '15 at 14:35

kaigorodov

877
9
15

Sorry, I don't know well three. can you say me where i must put these code lines please? – maniuz Nov 19 '15 at 14:59
You have `var m = baseMesh.clone();` line in your code. Just put `m.material = baseMesh.material.clone();` on the next line. That should solve the problem. – kaigorodov Nov 19 '15 at 15:07
of course, i'm tired. Thank you, now only the selected object change color. Just another little thing. The color change gradually (i see different colours), i think because change color inside tween animation which has a duration of 2 seconds. Is it possible change from one color to another without other intermediate colors? – maniuz Nov 19 '15 at 16:07
Can you add a code of changing color to the question? For now there is only code of changing size, but not the color of an object. – kaigorodov Nov 19 '15 at 17:22
Done. I added the 3 lines that i used to change the color in the highlightCityMesh function. – maniuz Nov 20 '15 at 09:14
You can remove these 3 lines and add `m.material.color.setHex(0xc00000);` right after the `function highlightCityMesh(m){` line. Color will change imidiately after hover. – kaigorodov Nov 20 '15 at 10:45

score 1 · Answer 2 · answered Feb 12 '20 at 10:14

If you have different children with the same material color and you'd like to change the material color of only one selected mesh, this is how i would do it:

var cloned = selectedMesh.material.clone()
cloned.emissive.r = 0.92; // or cloned.color
cloned.emissive.g = 0.92;
cloned.emissive.b = 1;
selectedMesh.material = cloned;

How to change material color for only one object in THREE.js

2 Answers2