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!

Hi OSUBlake, thanks for the quick reply. I've made a stripped back pen with Three and Gsap https://codepen.io/johneemac/pen/RwgBwzq 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.

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.

Brilliant answer, thanks! I've got a lot of learning to do.

Hi, Been experimenting with Gsap over the last day or 2, and had some fun. The possibilites seem endless, especially with three.js. But i'm stuck. Excuse my newbie js skills, i have a lot to learn.... clearly! Ok, I can get the GTLF imported ok and animated but it's not working correctly. I want the animation to play upon load, and then on hover - go back to the original position and then pause. Upon coming out of hover then restart the animation from the off. Upon load it works and the animation runs. On hover it works, the 3 blocks return to the original location. But on restart from original position its very buggy and the whole animation becomes out of sync. I think the part i'm not getting right is below, ideally they should be declared once? var redShape = scene.getObjectByName("Red"); var greenShape = scene.getObjectByName("Green"); var blueShape = scene.getObjectByName("Blue"); I've tried, kill, restart, destroy, dozens of things but no luck so far. Help greatly apprecated. JM.