Jump to content
Search Community

Animate 3D Mesh along path

Robert May test
Moderator Tag

Recommended Posts

Hey Robert. In general, yes. WebGL allows you to have 3D meshes and update their values, so you can move meshes along a path using WebGL. 

 

Most likely it'd be helpful to use a WebGL library like Three.js. 

 

Here are a couple of demos that use GSAP 3 and Three.js that may be helpful:

See the Pen bGGMNPd?editors=0010 by aaroniker (@aaroniker) on CodePen

See the Pen ZEEOGXg by zadvorsky (@zadvorsky) on CodePen

 

Let us know if you have more specific questions.

Link to comment
Share on other sites

8 minutes ago, ZachSaucier said:

Hey Robert. In general, yes. WebGL allows you to have 3D meshes and update their values, so you can move meshes along a path using WebGL. 

 

Most likely it'd be helpful to use a WebGL library like Three.js. 

 

Here are a couple of demos that use GSAP 3 and Three.js that may be helpful:

 

Let us know if you have more specific questions.

Thanks for the quick response Zach. I am using Three.js but I was hoping to use GSAP to accomplish this.  I've used the code below to tween SVG's and was wondering if I could do the same with an Blender mesh imported into Three.js.

gsap.registerPlugin(MotionPathPlugin);
gsap.to("#rect", {
  duration: 5, 
  repeat: 12,
  repeatDelay: 3,
  yoyo: true,
  ease: "power1.inOut",
  motionPath:{
    path: "#path",
    align: "#path",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }
});
Link to comment
Share on other sites

3 hours ago, Robert May said:

I've used the code below to tween SVG's and was wondering if I could do the same with an Blender mesh imported into Three.js.

You can't just replace "#rect" with a reference to a WebGL mesh (align, alignOrigin, and autoRotate wouldn't work), but you can still use MotionPathPlugin to animate the mesh. You just have to make sure that GSAP is pointing to the correct objects and that your camera is able to view where the mesh is.

 

In order to get autoRotate to work, it's probably best to use a proxy element. Then in the tween's onUpdate you update the mesh's properties. Something like this:

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

 

Keep in mind that MotionPathPlugin is built to work in 2D, so in order to add a 3D component to your path you'd likely need to pair a couple of animations together.

Edit: You can pass in 3D coordinates. See below for more info.

  • Like 2
Link to comment
Share on other sites

18 minutes ago, ZachSaucier said:

You can't just replace "#rect" with a reference to a WebGL mesh (align, alignOrigin, and autoRotate wouldn't work), but you can still use MotionPathPlugin to animate the mesh. You just have to make sure that GSAP is pointing to the correct objects and that your camera is able to view where the mesh is.

 

In order to get autoRotate to work, it's probably best to use a proxy element. Then in the tween's onUpdate you update the mesh's properties. Something like this:

 

I got it to work but I need to move about in three directions, I need to tween the Z direction also. I have a Python script that outputs the x,y and z coordinates in an array, so I used those coordinates to define my path but it didn't move in the Z direction. I'm thinking MotionPathPlugin doesn't do that.

Link to comment
Share on other sites

Like I said in the edit to my post above, to get 3D support you'd have to combine two animations together as is. You could do so in the onUpdate function for one of them.

Edit: You can pass in 3D coordinates. But I don't think MotionPathPlugin handles 3D bezier curves.

 

That is, unless @GreenSock wants to add support for 3D bezier curves :D No promises, but I wouldn't be surprised if he just drops by and adds a plugin to add support for that, hah. He has a tendency to do things like that for interesting problems :) 

Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

Like I said in the edit to my post above, to get 3D support you'd have to combine two animations together as is. You could do so in the onUpdate function for one of them.

 

That is, unless @GreenSock wants to add support for 3D bezier curves :D No promises, but I wouldn't be surprised if he just drops by and adds a plugin to add support for that, hah. He has a tendency to do things like that for interesting problems :) 

I'm glad you said that lol because I didn't notice the edit part, I think that's the way I will go. It would be awesome if he would add that plugin. GASP is awesome anyway, I wish I could use it on everything I do.

 

Zach you've been very helpful thank you so much!

  • Like 1
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

That is, unless @GreenSock wants to add support for 3D bezier curves :D No promises, but I wouldn't be surprised if he just drops by and adds a plugin to add support for that, hah. He has a tendency to do things like that for interesting problems :) 

 

Strange. The old bezier plugin could do 1d, 2d, 3d, whatever. The calculation should be the same. 

 

  • Like 1
Link to comment
Share on other sites

1 minute ago, Robert May said:

why was the proxy div created and why are you tweening it instead of the cube?

The proxy is to allow MotionPath's rotation to be used. Since in Three.js you have two different objects - one to control the position and another to control the rotation - it's handy to use a single tween on the proxy element and then update the mesh's rotation and position based on that proxy. Does that make sense?

  • Like 1
Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

The proxy is to allow MotionPath's rotation to be used. Since in Three.js you have two different objects - one to control the position and another to control the rotation - it's handy to use a single tween on the proxy element and then update the mesh's rotation and position based on that proxy. Does that make sense?

That makes perfect sense now. :)

I still can't make it work for my project though, it's giving me"InvalidCharacterError: String contains an invalid character ".

I'm going to try to make a CodePen for it.

Link to comment
Share on other sites

@ZachSaucier

 

Zach I can't get the Code Pen to work and I'm running out of time to get this project done so I may have to abandon following a path.

 

I got your original code to work but the position is off. Is there a way to accomplish following the path without using the div? Rotation is not an issue, all I want is to animate a sphere down a path to simulate current flow through a wire.

 

Thanks

Link to comment
Share on other sites

Just now, ZachSaucier said:

What's off about it? A demo would be helpful :) 

I'm using a json loader to load a local file on my computer and I don't know enough about CodePen to make it work... sorry, I spent hours trying.

It follows the path fine but I can't make it line up from the start.

 

Link to comment
Share on other sites

5 minutes ago, ZachSaucier said:

So you're saying the movement is correct but the offset is wrong? MotionPathPlugin has a offsetX and offsetY properties you can use that use if that's the case. See the docs for more info.

Didn't know I could use that, that should work. I don't understand that code that you originally posted, and again I'm a novice, but you created the div but never put the mesh in it, is that correct? I'm asking because I will need to reuse this code over and over on many meshes.

Link to comment
Share on other sites

2 minutes ago, Robert May said:

you created the div but never put the mesh in it, is that correct? I'm asking because I will need to reuse this code over and over on many meshes.

Correct, it's used as a proxy to get the correct values. If you need to do it for a lot of elements, make a function for the creation:

See the Pen oNXqqpN by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Correct, it's used as a proxy to get the correct values. If you need to do it for a lot of elements, make a function for the creation:

I think I've got it now. My problem was with the Blender mesh, not applying transforms.🤪

Thanks for the pen, I haven't tried it yet but I get the idea and I think it'll be perfect. Got to play around with the things I just learned for a bit to get them to sink in lol, then I'll try doing multiples with your code... You are the best, thank you so much for hanging with me!

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...