javascript - 如何更新三种 Material 数据？

Question

我想根据单选按钮选择更改对象的 Material 。在我当前的示例中，颜色更改有效。不幸的是，它没有更新全部 Material 。

我如何告诉 THREE 相应地更新其内部数据？

Material

  var lederfaserMap = THREE.ImageUtils.loadTexture( 'textures/lederfaser.jpg' );
  lederfaserMap.anisotropy = 16;
  lederfaserMap.wrapS = lederfaserMap.wrapT = THREE.RepeatWrapping;
  lederfaserMap.repeat.set( 5, 5 );


  var feinleinenMap = THREE.ImageUtils.loadTexture( 'textures/feinleinen.jpg' );
  feinleinenMap.anisotropy = 16;
  feinleinenMap.wrapS = feinleinenMap.wrapT = THREE.RepeatWrapping;
  feinleinenMap.repeat.set( 8, 8 );


  var material = {     
  "feinleinen-schwarz":     new THREE.MeshPhongMaterial( { color: 0x222222, map: feinleinenMap, combine: THREE.MixOperation} ),
  "feinleinen-weiss":   new THREE.MeshPhongMaterial( { color: 0xffffff, map: feinleinenMap, combine: THREE.MixOperation } ),
  "lederfaser-schwarz":     new THREE.MeshPhongMaterial( {color: 0x222222, map: lederfaserMap, combine: THREE.MixOperation } ),
  }

在此处更新 Material

  var group = new THREE.Group();

loader.load('/models/object.js', function(geometry){
  var materialchange= new THREE.Mesh(geometry, material[ "feinleinen-schwarz" ]);
  materialchange.name = "materialchange";
  group.add( materialchange);
});  

  scene.add( group );



function animate() {

  requestAnimationFrame(animate);
  TWEEN.update();
  renderer.render(scene, camera);

}

获取和更新素材的函数

function colorTo (target, value){
      var target = scene.getObjectByName(target);
      var initial = new THREE.Color(target.material.color.getHex());
      var value = new THREE.Color(value.color.getHex());
      var tween = new TWEEN.Tween(initial).to(value, 500)
          .easing(TWEEN.Easing.Cubic.InOut)
          .onUpdate(function(){
              target.material.color = initial;
          })
          .start();
  }  

获取选中单选按钮属性的函数

$("input[name=material]").change(function(event){
    if ($(this.checked)) {
        var targetColor = $(this).data("visual");
          colorTo("materialchange", material[targetColor]);
      }
  });

Answer 1

您需要做的是遍历该对象以将新颜色分配给其所有子部分:

object.traverse ( function (child) {

    if (child instanceof THREE.Mesh)
        child.material.color.copy = new_color;

}