Problem with rotation in degrees

[Mahmood]

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.

[Cassie]

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!

[Mahmood]

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?

[Cassie]

Maybe this thread will help?

 

 

[GreenSock]

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. 

[OSUblake]

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()

 

 

[Mahmood]

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.