Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
whales

Directional rotations for Three.js?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I was trying to do directional rotations in Three.js and encountered some weird/interesting behaviors...

 

Using "_ccw" will actually result in clockwise rotation while "_cw" lead to counterclockwise rotation. That effect is happening regardless of whether I put positive/negative radians before the string.

 

I have checked this 

 plugin "whipped together" by the almighty code god but it doesn't cover directional rotations in Three.js. 

 

Anyways.. at least I could do directional rotations now!! Just wanna share. Maybe it's because how Three.js use positive number for counterclockwise rotation and negative number for clockwise?

 

4f5429df5ea6361fa8d3f08dfcdccdf9.jpg

 

 

See the Pen NMrqvy?editors=1010 by asiankingofwhales (@asiankingofwhales) on CodePen

  • Like 1
Link to comment
Share on other sites

1 hour ago, whales said:

Maybe it's because how Three.js use positive number for counterclockwise rotation and negative number for clockwise?

 

Ah, yes indeed - it looks like Three.js inverts the rotational direction. In every other system I've seen, positive rotation goes clockwise (so animating 0 -> 45, for example, would spin clockwise) but in Three.js it goes counter-clockwise. Super weird. So yeah, I guess you've just gotta flip _ccw and _cw when you're working with Three.js :)

Link to comment
Share on other sites

Thanks for confirming my guess ... :)

 

And thanks for the NSFW videos with gang signs.

  • Like 1
  • Haha 1
Link to comment
Share on other sites

35 minutes ago, whales said:

And thanks for the NSFW videos with gang signs.

 

Hehe. I just did a little more searching, and found out that you should use right-handed gang signs when using three.js.

 

XsXgrle.jpg

 

 

Positive rotation for right hand goes counter clockwise, which is indeed the opposite of what the plugin does.

 

xC6Yy48.png

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×