Currently, I am attempting to create a mousemove event in three.js that will trigger a scale effect when the user hovers over a geometry. In order to animate this effect, I have integrated GSAP as an alternative to using the tween function which was not working for me. However, every time I attempt to scale my geometry, I encounter the following error message: https://i.sstatic.net/ZIhUy.png
I'm puzzled by this issue because the official GSAP documentation showcases the use of scale without the need for a plugin. Here is a snippet from their website:
gsap.to(".box", 1, {
scale: 0.1,
y: 60,
yoyo: true,
repeat: -1,
ease: "power1.inOut",
delay:1,
stagger: {
amount: 1.5,
grid: "auto",
from: "center"
}
});
Below is the code snippet in question:
function init () {
/*------Several lines of three.js code and initialization*/
window.addEventListener('mousemove',onMouseMove);
}
function onMouseMove(event) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse,camera);
var intersects = raycaster.intersectObjects(scene.children, true);
for(var i = 0; i < intersects.length; i++) {
gsap.to(intersects[i].object.scale, {duration: 1, scale: 0.8});
}
}