I need to create a 3D object (cube, sphere, or torus knot) that moves around the viewport, changes direction upon hitting the edges (bouncing effect), and changes color each time it bounces. I'm using WebGL/Three.js.
Current Implementation: I've successfully created a basic 3D object and animated it to move within the viewport using myMesh.position.x and myMesh.position.y. However, I'm struggling with implementing the bouncing logic and dynamically changing the object's color upon collision with the viewport edges.
I'm having trouble determining the correct conditions to detect when the object hits the edges of the viewport and how to smoothly implement the bouncing effect. Additionally, I'm unsure how to efficiently change the object's color dynamically based on its position within the viewport.
Expected Output: I expect the object to move smoothly around the viewport, change direction upon hitting the edges (like a bouncing ball), and dynamically change color each time it bounces.
Request: Could someone provide guidance or a clear example of how to implement the bouncing logic and dynamically change colors in WebGL/Three.js based on the described requirements?
