Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Robert May

Rotate 3d mesh

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

Share this post


Link to post
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

Share this post


Link to post
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. :)

Share this post


Link to post
Share on other sites

I popped that code in my script and changed it over GSAP3 and it works PERFECTLY! Thanks again.

  • Like 2

Share this post


Link to post
Share on other sites

.to(mesh, {duration: 1, scaleX: 3});

.to(mesh, {duration: 2, x: 100})

 

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

Share this post


Link to post
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: 

 

Share this post


Link to post
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}})

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
14 minutes ago, ZachSaucier said:

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.

I'll see what I can do and thanks again.

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

×