Animate 3D Mesh along path

[Robert May]

I've searched the internet but i haven't found a way to do this yet, is it possible to animate a 3D mesh along a path?

[ZachSaucier]

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.

[Robert May]

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]
  }
});

[Robert May]

I tried it but I'm getting this error.

Type Error: "Rotation" is read-only

[ZachSaucier]

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.

[Robert May]

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.

[ZachSaucier]

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

[Robert May]

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

[OSUblake]

1 hour ago, ZachSaucier said:

That is, unless @GreenSock wants to add support for 3D bezier curves  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. 

 

[ZachSaucier]

3 minutes ago, OSUblake said:

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

Oops, good call. You can add a z component to it, no issue @Robert May. I didn't think to even test it. I updated the demo above to have a third (z) component as well.

[ZachSaucier]

That doesn't handle rotation in 3 dimensions though. So something like a 3D bezier curve or combining animations would be necessary to add support for that. As is, it will rotate just based on the x and y components.

[OSUblake]

Just now, ZachSaucier said:

You can add a z component to it

 

That just uses gsap's smoothing algorithm, which might be fine for what you're doing. What I found strange is that it doesn't work for type: "cubic" anymore.

 

[OSUblake]

3 minutes ago, ZachSaucier said:

That doesn't handle rotation in 3 dimensions though.

 

Just need to calculate rotation using the last position and current position... although I think 3d space is flipped in three.js.

[OSUblake]

3 minutes ago, OSUblake said:

although I think 3d space is flipped in three.js.

 

Gang signs...

 

[ZachSaucier]

3 minutes ago, OSUblake said:

Gang signs...

I remember the right hand rule from physics class  

 

I also love that the OP of that thread has a profile picture of Michael Scott being a gangster, ha ha.

[Robert May]

@ZachSaucier

 

Zach I'm not a professional so forgive me if this is a dumb question but in your CodePen, why was the proxy div created and why are you tweening it instead of the cube?

 

 

 

[ZachSaucier]

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?

[Robert May]

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.

[Robert May]

@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

[ZachSaucier]

1 minute ago, Robert May said:

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?

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

[Robert May]

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.

 

[ZachSaucier]

2 minutes ago, Robert May said:

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

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.

[Robert May]

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.

[ZachSaucier]

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.

[Robert May]

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!