Mahmood Posted December 19, 2021 Share Posted December 19, 2021 Hello everyone. I'm using GSAP to rotate a Three.js camera in my app. I have no problem if I want to go from 20 degrees rotation to 270 degrees. But if I want to go from 270 degrees to 20, I don't want the camera to go backwards, instead I prefer it starts from 270 going to 360 and then from 1 to 20. I already achieved this by making an array with all the numbers from 270>360 + 1>20 and then use this array on the onUpdate function to rotate the camera, however, this doesn't give me a smooth result. (I attached the code) Can anyone help me with a solution for this? Thank you. Link to comment Share on other sites More sharing options...
Cassie Posted December 19, 2021 Share Posted December 19, 2021 You can do directional or shortest rotation neatly with GSAP! See the Pen 7dee3e36b9e737aceb6c2d3364d39f34?editors=1010 by cassie-codes (@cassie-codes) on CodePen Hope this helps! 1 Link to comment Share on other sites More sharing options...
Mahmood Posted December 19, 2021 Author Share Posted December 19, 2021 Thank you so much for the quick reply Cassie. The sample you sent is great, however, I can't use this as I need to convert the rotation value from degrees to radians in order for the Three.js camera to work properly. Any idea on this? Link to comment Share on other sites More sharing options...
Cassie Posted December 19, 2021 Share Posted December 19, 2021 Maybe this thread will help? 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 19, 2021 Share Posted December 19, 2021 Yep, short rotation can be done in radians. It would really help if you could provide a minimal demo please, like as a CodePen. Just something very simple - it doesn't need to be your actual project. You could even do a proxy element and just copy its rotation over to your ThreeJS object. 1 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted December 19, 2021 Solution Share Posted December 19, 2021 Here's a function that might help. The endAngle would need to be in rads. let PI = Math.PI; let TAO = PI * 2; function angleDifference(a1, a2) { let diff = (a2 - a1 + PI) % TAO - PI; return diff < -PI ? diff + TAO : diff; } gsap.to(camera.rotation, { x: `+=${angleDifference(camera.rotation.x, endAngle)}` }) Also, you don't need write your own map function as GSAP already provides one. https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange() 3 Link to comment Share on other sites More sharing options...
Mahmood Posted December 20, 2021 Author Share Posted December 20, 2021 9 hours ago, OSUblake said: Here's a function that might help. The endAngle would need to be in rads. let PI = Math.PI; let TAO = PI * 2; function angleDifference(a1, a2) { let diff = (a2 - a1 + PI) % TAO - PI; return diff < -PI ? diff + TAO : diff; } gsap.to(camera.rotation, { x: `+=${angleDifference(camera.rotation.x, endAngle)}` }) Also, you don't need write your own map function as GSAP already provides one. https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange() Thank you everyone for helping me with this. OSUblake, I'm really grateful, your code worked perfectly and now the camera movement is smooth and awesome. And thank you for the tip on the map function, didn't know that. 3 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