我想根据单选按钮选择更改多维数据集的材质。颜色更改在我当前的示例中有效。不幸的是,它没有更新整个材料。我正在使用一个名为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();
}
答案 0 :(得分:2)
当您在曲面上切换材质时,您需要告诉THREE相应地更新其内部数据。所以当你切换时,也要设置model.material.needsUpdate = true;
对于某些相关提示,请查看https://github.com/mrdoob/three.js/wiki/Updates