如何为 THREE.js 中的一个对象更改 material 颜色

Question

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

这是创建对象的代码：

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

这是改变selected对象尺寸的函数(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

您正在克隆一个锥体。在克隆网格期间，共享 link 到一个 material。如果您需要单独更改形状的颜色，那么您还需要为每个对象克隆一个 material。它认为应该足够了：

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

Answer 2

如果您有不同的 children 和相同的 material 颜色，并且您只想更改一个选定网格的 material 颜色，我会这样做:

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;

如何为 THREE.js 中的一个对象更改 material 颜色

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

javascript

three.js

tween.js