如何在 THREE.js 中仅更改一个对象的材质颜色

Question

我正在编辑用 Three.js 和 Tween.js 编写的程序。我尝试在这里和网上找到解决方案，但没有结果。我有很多由 THREE.Mesh 创建的对象（锥体），并且有一个小脚本，每 5 秒选择其中一个对象，并在短时间内更改其尺寸。我也想改变颜色，但我有一些问题。如果我尝试更改颜色，则会对每个对象进行更改，但我希望仅对脚本选择的对象进行更改。

这是创建对象的代码：

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

这是改变所选对象尺寸（米）的函数：

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

谢谢

Answer 1

你正在克隆一个圆锥体。在克隆过程中，网格共享一种材质的链接。如果您需要单独更改形状的颜色，那么您还需要为每个对象克隆材质。它认为应该足够了：

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