Is it possible to update the material of an object based on a radio button selection? I have managed to change the color in my current example, but the entire material does not get updated. How can I instruct THREE to adjust its internal data accordingly?
Materials
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 } ),
}
Update the Material here
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 to adjust and apply the material
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();
}
Function to retrieve the attribute of the selected radio button
$("input[name=material]").change(function(event){
if ($(this.checked)) {
var targetColor = $(this).data("visual");
colorTo("materialchange", material[targetColor]);
}
});