Jump to content
Search Community

Rotate 3d mesh

Robert May test
Moderator Tag

Recommended Posts

Hello. I've been able to use TweenMax to duplicate the rotation action of the cube using the code below. It works, but the rotation starts out fast and then slows down as it completes the revolution.  I have tried using different eases but the ease doesn't seem to have any effect. Does easing work with what I'm doing? Thanks!

 

TweenMax.to([carBattery], 10, {three:{rotationY:360, ease:Back.easeOut}})

 

I tried to get this in the code pen but I never could make it work, sorry.

See the Pen vYOyygM?editors=0010 by RobertMay (@RobertMay) on CodePen

Link to comment
Share on other sites

Hey Robert and welcome. Thanks for being a Club GreenSock member! We couldn't do what we do without people like you.

 

If you want the animation to be constant you should use Linear.easeNone. So the above would be

TweenMax.to(carBattery, 10, {three:{rotationY:360, ease:Linear.easeNone}})

That selector doesn't match up with your demo above, but I presume you know that already :) 

 

I am curious where you're getting the three object from though - did you see a post about loading a Three.js plugin somewhere on the forum?

 

In the demo above you could animate the cube by using the following in the init function and removing the rotation in the update function:

TweenLite.to(mesh.rotation, 10, {y: Math.PI * 2, repeat: -1, ease: Linear.easeNone});

See the Pen BaNQpQZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But I highly recommend that you use GSAP 3 as opposed to the version of TweenMax that you're using (the /latest TweenMax is actually a really old version of GSAP). Then it's more simple:

gsap.to(mesh.rotation, {duration: 10, y: Math.PI * 2, repeat: -1, ease: "none"});

See the Pen VwLmPPe?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

31 minutes ago, ZachSaucier said:

Hey Robert and welcome. Thanks for being a Club GreenSock member! We couldn't do what we do without people like you.

If you want the animation to be constant you should use Linear.easeNone. So the above would be


TweenMax.to(carBattery, 10, {three:{rotationY:360, ease:Linear.easeNone}})

That selector doesn't match up with your demo above, but I presume you know that already :) 

 

I am curious where you're getting the three object from though - did you see a post about loading a Three.js plugin somewhere on the forum?

 

In the demo above you could animate the cube by using the following in the init function and removing the rotation in the update function:


TweenLite.to(mesh.rotation, 10, {y: Math.PI * 2, repeat: -1, ease: Linear.easeNone});

 

But I highly recommend that you use GSAP 3 as opposed to the version of TweenMax that you're using (the /latest TweenMax is actually a really old version of GSAP). Then it's more simple:


gsap.to(mesh.rotation, {duration: 10, y: Math.PI * 2, repeat: -1, ease: "none"});

Wow thanks Zach. Yes I realize the selector doesn't match. :) I grabbed some code from the three.js samples page to give a quick example of my issue.

 

I did try to migrate over to GSAP 3 but I had a few issues like scaleX was flipping my object upside down. Also had some issuesI'm under pressure on a project that I'm working on right now so I don't have time for learning new things. It does look pretty cool though and I will change over when I get a chance.

 

I know very little about 3D but for the presentations that I'm doing it's incredibly useful. I combine SVG drawings with 3D objects and control animations for both on a gsap timeline.

 

Thanks for your help... I'll probably be back for more. :)

Link to comment
Share on other sites

6 minutes ago, Robert May said:

This isn't working, is it written wrong or do I need a plugin?

There are relatively few special properties (like duration) in GSAP. For the most part, you give it a JS object and then it animates those properties values (like mesh.rotation.y in the code I posted above).

 

Those attempts not working likely means the element is not a DOM element so you can't use GSAP properties like scaleX or x if they don't exist on the object. 

 

To translate it in your project, it depends on your Three.js object but you might be able to make use of the position property

To scale it, you might be able to use the scale property.

To use either, you should make sure you're affecting the right thing. The easiest way is probably to console.log your object and see what properties and such that it has. 

 

Our Getting Started article can help your overall understanding of GSAP: 

 

Link to comment
Share on other sites

15 minutes ago, ZachSaucier said:

Those attempts not working likely means the element is not a DOM element so you can't use GSAP properties like scaleX or x if they don't exist on the object. 

 

 

 

Zach I'm a novice so forgive me if this is a dumb statement but I changed everything back to GSAP 2 and used the code below and it works as expected. Doesn't that mean that it is a DOM element? Just asking because I don't know.

 

.to([object], 2, {three:{scaleX:2, scaleY:2, scaleZ:2}})

Link to comment
Share on other sites

Just now, Robert May said:

I changed everything back to GSAP 2 and used the code below and it works as expected. Doesn't that mean that it is a DOM element? Just asking because I don't know.

It's impossible for us to say without seeing what's happening. Got a minimal demo that we can look at? Preferably in a CodePen or something.

Link to comment
Share on other sites

Part of the problem may be that it looks like you're using a plugin for v2 - your code had three:{...} which was the hint. Version 2 plugins don't work in version 3. The old plugin wasn't an "official" one anyway. 

 

32 minutes ago, Robert May said:

Not sure if this is right but it works for me.

.to(object.scale, {duration: 10, x: 2, y: 2, z: 2, ease: "none"})

So are you all set with a solution now? Any other questions we can help with?

  • Like 2
Link to comment
Share on other sites

5 hours ago, GreenSock said:

Part of the problem may be that it looks like you're using a plugin for v2 - your code had three:{...} which was the hint. Version 2 plugins don't work in version 3. The old plugin wasn't an "official" one anyway. 

 

So are you all set with a solution now? Any other questions we can help with?

I think you're right Jack. It looks like I'm good to go now. Thank you guys for helping me out.

  • Like 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.
×
×
  • Create New...