I am a beginner in Three Js and I am struggling with changing the color of my material when a button on the html page is pressed. Can anyone provide me with some suggestions? Below is the code snippet:
This is how I define my material:
var color2= new THREE.Color(0xff0000)
var customMaterial = new THREE.ShaderMaterial(
{
uniforms: {
p: { type: "f", value: 2 },
glowColor: { type: "c", value: color2 },
},
vertexShader: $('#vertexShader').text,
fragmentShader: $('#fragmentShader').text,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending,
transparent: true,
depthWrite: false
});
This is how I update the color:
function render() {
renderer.render(scene, camera);
document.getElementById("colore").onclick= function(){
console.log("testing color change");
var customMaterial = new THREE.ShaderMaterial(
{
uniforms: {
p: { type: "f", value: 2 },
glowColor: { type: "c", value: new THREE.Color(0x00ff00) },
},
vertexShader: $('#vertexShader').text,
fragmentShader: $('#fragmentShader').text,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending,
transparent: true,
depthWrite: false
});
customMaterial.needsUpdate = true
}
Finally, here is how I assign the material to my 3d model:
function petali2(){
var loaderpetali = new THREE.ColladaLoader();
loaderpetali.load('petali3.dae', function (collada) {
petali = collada.scene;
petali.traverse( function ( child ) {
if (child instanceof THREE.Mesh) {
console.log(child);
child.material = customMaterial;
}
} );
petali.scale.x = 2;
petali.scale.y = 2;
petali.scale.z = 2;
scene.add(petali);
});
}