Guest Posted March 13, 2021 Share Posted March 13, 2021 Hello, have a nice day , i have problem with control in three js and gsap , any one know tutorial for this? for example i want to zoom camera with scrolling but i don't know how , and many thing like this , this is my code ` .to(camera.position, 2, { y: -11.1, duration: 2, }, "simultaneously") ` Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted March 13, 2021 Solution Share Posted March 13, 2021 Hey leenalfalah. You can animate the camera's position just like any other object. For example: See the Pen oNYmKQa?editors=0010 by GreenSock (@GreenSock) on CodePen If you want to do something on scroll, you probably want to attach a ScrollTrigger. Probably something like this: See the Pen GRNzVPV?editors=0010 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
Guest Posted March 14, 2021 Share Posted March 14, 2021 @ZachSaucier Thank you very much , it little work , but i can just play with camera position or rotation ?? , what if i want to zoom it with ` camera.zoom= number ` , and thank you for your time and replay Link to comment Share on other sites More sharing options...
akapowl Posted March 14, 2021 Share Posted March 14, 2021 Hey @leenalfalah Google led me to this: https://discourse.threejs.org/t/animate-camera-zoom-and-controls-target/16583 And it indeed does seem to work See the Pen e595e13b0cfcd9f289ae2ae5c016745d by akapowl (@akapowl) on CodePen I'm not sure, wether the onUpdate is best to be placed inside the scrollTrigger-object or outside of it, though (or if it would make a difference). 3 Link to comment Share on other sites More sharing options...
Guest Posted March 14, 2021 Share Posted March 14, 2021 @akapowl Oh , thank you so much , it sounds work , about onUpdate i don't know for what we use it ? Link to comment Share on other sites More sharing options...
akapowl Posted March 14, 2021 Share Posted March 14, 2021 It looks like when changing certain properties you will have to update the camera's projection matrix to make the effect be visualized. https://threejs.org/docs/#api/en/cameras/PerspectiveCamera https://threejs.org/docs/#api/en/cameras/PerspectiveCamera.updateProjectionMatrix 2 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