Tommaso Mastroberardino Posted May 27, 2021 Share Posted May 27, 2021 Hi everyone I've started yesterday playing around with GSAP for work and so far i'm having a lot of fun :D. My objective is to have a simple 3d object at the center of my scene and a camera to rotate around it. So far so good. But i'm having trouble implementing a reset function for the camera, when a button is clicked the camera should go back to the starting position with an animation. https://jsfiddle.net/tomthebearded/dkug68to/ As you can see when you run the jsfiddle what i've tried until now is changing the position of the camera with gsap.to but it's not right effect for my project. Changing the position in this way makes the camera basically move close to the center before moving out to reach the final position. What i need is more a rotation around the object to reach a defined position. Is there a way to achieve this? Link to comment Share on other sites More sharing options...
Cassie Posted May 27, 2021 Share Posted May 27, 2021 Maybe this page of the three.js docs will help? Looks like you can autoRotate a camera around a target.https://threejs.org/docs/#examples/en/controls/OrbitControls Link to comment Share on other sites More sharing options...
Tommaso Mastroberardino Posted May 27, 2021 Author Share Posted May 27, 2021 Thank you @Cassie But it's my understanding that the autoRotate it's only for infinite rotation and it's linear. Instead i need to rotate to a specific position and stop. Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 27, 2021 Share Posted May 27, 2021 Since you're tweening x/y/z values the camera will move in a straight line from point a to b, you'll need to math the arc, and setup an onUpdate, or perhaps motionPath would be an easier solution to accommodate this. Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 27, 2021 Share Posted May 27, 2021 You may also find these helpful (I didn't dive too deep here, but the responses looked promising):https://stackoverflow.com/questions/65012960/how-to-animate-camera-lookat-using-gsap and https://stackoverflow.com/questions/18466578/rotate-camera-around-object-with-three-js 1 Link to comment Share on other sites More sharing options...
Tommaso Mastroberardino Posted May 27, 2021 Author Share Posted May 27, 2021 5 minutes ago, elegantseagulls said: You may also find these helpful (I didn't dive too deep here, but the responses looked promising):https://stackoverflow.com/questions/65012960/how-to-animate-camera-lookat-using-gsap and https://stackoverflow.com/questions/18466578/rotate-camera-around-object-with-three-js Thank you The first link seems to be about rotating a camera on itself to look at another object. Not my case. The second is about rotation on user input (dragging the camera) but i had no problem implementing this part. Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 27, 2021 Share Posted May 27, 2021 Looks like it's Math or motionPathPlugin, then: https://greensock.com/docs/v3/Plugins/MotionPathPlugin Or, perhaps you could group your scene, and rotate that instead? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now