Question

我想根据单选按钮选择更改多维数据集的材质。颜色更改在我当前的示例中有效。不幸的是，它没有更新整个材料。我正在使用一个名为tweenjs的补间插件来实现流畅的动画效果。

如何捕捉整个MeshPhongMaterial而不仅仅是颜色？

单选按钮

<div id="inputs">
    <input id="black" type="radio" data-color="black" name="color" value="" checked>
    <input id="white" type="radio" data-color="white" name="color" value="">
    <input id="red" type="radio" data-color="red" name="color" value="">
</div>

用于单选按钮连接的jQuery

 $("#inputs input").change(function(event){
        if ($(this.checked)) {
            var targetColor = $(this).data("color");
            colorTo("box", color[targetColor]);
        }
    });

three.js所

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


var color = {

  "black": new THREE.MeshPhongMaterial({
      color: 0x222222, map: colorMap, combine: THREE.MixOperation
  }),
      "white": new THREE.MeshPhongMaterial({
      color: 0xffffff, map: colorMap, combine: THREE.MixOperation
  }),
      "red": new THREE.MeshPhongMaterial({
      color: 0xf80000, emissive: 0x222222, specular: 0x222222, map: colorMap, combine: THREE.MixOperation
  })

}

var renderer, scene, camera;
init();
animate();

function init() {    
    var WIDTH = window.innerWidth;
    var HEIGHT = window.innerHeight;

    camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 300 );
    camera.position.z = 10;

    scene = new THREE.Scene();

    var geometry= new THREE.BoxGeometry(2,2,2);
var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0x222222}));
    mesh.name = "box";
    scene.add(mesh );

    renderer = new THREE.WebGLRenderer({ antialias: true });    //Create WebGL context
    renderer.setClearColor( 0xffffff );                         //Set background
    renderer.setPixelRatio( window.devicePixelRatio );          //Set pixel aspect ratio
    renderer.setSize( WIDTH, HEIGHT );                          //Set viewport size
    document.body.appendChild( renderer.domElement );           //Append renderer object to the DOM
}

function animate() {                        //Animation draw loop
    requestAnimationFrame(animate);         //Request animation frame (graphics performant setTimeout equivalent)
    TWEEN.update();                         //Update tweens in progress
    renderer.render(scene, camera);         //Render the updates
}

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, 1000)
        .easing(TWEEN.Easing.Cubic.InOut)
        .onUpdate(function(){
            target.material.color = initial;
        })
        .start();
}

http://jsfiddle.net/489k6s3g/

Answer 1

当您在曲面上切换材质时，您需要告诉THREE相应地更新其内部数据。所以当你切换时，也要设置model.material.needsUpdate = true;

对于某些相关提示，请查看https://github.com/mrdoob/three.js/wiki/Updates

如何使用单选按钮更改对象的材质？

1 个答案: