I'm currently working on animating the uniforms value of a shader using Tween.js when a button is clicked. The code snippet below shows my implementation:
Shader.uniforms.threshold.needsUpdate = true;
function fadeIn() {
new TWEEN.Tween( Shader.uniforms.threshold )
.to( { value : 0.6 }, 100 )
.start();
}
function fadeOut() {
new TWEEN.Tween( Shader.uniforms.threshold )
.to( { value : 2 }, 100 )
.start();
}
document.getElementById("FadeIn").onclick = function() {
fadeIn();
}
document.getElementById("FadeOut").onclick = function() {
fadeOut();
}
However, I am facing an issue where the code does not work as expected. Upon refreshing the page, the value changes but clicking the button does not have any effect. I am seeking assistance in identifying the error in my approach. Is Tween.js the appropriate way to achieve this or is there a better alternative? Thank you.