Question

我正在编辑在Three.js和Tween.js中编写的程序。我尝试在这里和网上找到解决方案，没有结果。我有很多由THREE.Mesh创建的对象（cones），并且有一个小脚本，每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;
});

这是改变所选对象（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();

Answer 2

如果您有具有相同材质颜色的其他子级，并且您只想更改一个选定网格的材质颜色，这就是我要这样做的方式：

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中仅更改一个对象的材质颜色

2 个答案: