GSAP with Three.js and Pixi.js - combining them all - fail

[JohneeMac]

Hi folks,

 

I've been at this for many hours now and getting a little flustered.

 

With Three js I'm trying rotate a 3d object around an axis different from standard origin point.

 

Importing gltf with three all working, don't think any issues there.

 

I came across this post

It say's that you cannot use a native origin point with GSAP but suggests PixiJS pivot is the way to go.

 

I then came across this jsFiddle https://jsfiddle.net/kdn8ytw7/

 

Which gives a way to setup Pixi and combine a 2d canvas with 3d canvas.

 

I can persevere with that, but just coming across error after error with combining my working three and GSAP code with that JFiddle.

 

Is this the only way to get Pixi working with GSAP and Three, for just a transform origin point change?

 

To  further confuse things, i'm using webpack stream within gulp to compile js, although i dont think that's hindering things currently.

 

Once i get this up and running happy to make a pen, for others if looking to do the same thing.

 

Guidance very much appreciated.

 

Thanks for looking.

 

 

 

 

[OSUblake]

Hi Johnee!

 

I'm very confused about what you're trying to do. If you're working gltf models, then keep PixiJS out of it. Pixi's pivot and anchor are just for Pixi display objects, and will be of no help with three.js.

 

And that fiddle isn't even working for me, but just from reading the code, all it's doing is providing a texture for three. Nothing special, and can be done using regular canvas APIs.

 

GSAP can animate whatever you want, but you need to figure out how to rotate your model the way you want in three.js first. Get the start and end states, and GSAP can fill in the rest.

 

[JohneeMac]

Hi OSUBlake, thanks for the quick reply.

 

I've made a stripped back pen with Three and Gsap

See the Pen RwgBwzq by johneemac (@johneemac) on CodePen

 

As you can see it rotates from middle. I'd like the transform origin point to make it lie completely flat, then animate into upright position from a different pivot/ origin. Thanks.

 

 

 

 

[OSUblake]

I honestly don't know how to change the transform origin. You should probably search three.js support channels for that. If you can show how to set it, we can help show how to animate. I have a feeling it's a little more complicated than just changing a property due to way rotation is handled in 3d.

 

[JohneeMac]

Hi folks,

 

Just a quick follow up to this, if anyone else happens to run into the same issue.

 

The problem was very simple, in your 3d software, my case Blender, you simply move the transform origin point.

 

The data should be stored in the GLB, and therefore you can pivot on any point you want. Easy!

[Cassie]

Thanks for popping back in to update @JohneeMac,  ✨

 

Appreciated!