I am relatively new to JavaScript, although I have a background in mathematics which includes concepts like coordinate systems and trigonometry. I've been learning JavaScript through Codecademy for the past couple of weeks, and recently attempted to create shapes in three.js by following tutorials on YouTube. Despite watching multiple tutorials on the same topic, I encountered an issue.
My project involves 5 objects that slightly rotate when you hover over them and revert back to their original position when the mouse moves away. Additionally, clicking on any object triggers a camera tween that moves closer to the selected object. Clicking on the same object again should return the camera to its original position.
I've set up event listeners for 'mousemove' and 'onclick', but my problem arises when I want to disable the hover effect after an object has been clicked and the camera has moved. I tried various approaches based on online resources and documentation, but nothing seems to work as intended. Perhaps there's something I'm overlooking, such as the inability to remove event listeners within if statements.
In my attempt to resolve this issue, I added code inside the click event block to disable the hover effect, but it didn't yield the desired result. Is there a way to disable the rotation tween specifically when the object is clicked?
Below are snippets of my code, including the object creation, camera animations, event listeners, and functions handling click and mouse movement interactions. Any assistance or guidance would be greatly appreciated as I strive to overcome this challenge and avoid disappointing my father, who has high expectations for this project.