Jump to content

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

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

Recommended Posts

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.





Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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.





Link to comment
Share on other sites

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.


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.