What's your blender to threejs workflow to handle different axis?

Hi,

When using both blender and threejs for years now I’m getting tired of needing to translate between the two coordinate systems in my head everytime. It’s confusing and something I can’t get used to and it shouldn’t be this complex when desiging in blender and using in threejs.

Over the years I tried several things to overcome this problem in several ways, but so far none of them seem to work well on the long run. All seem to have their cons.

I wonder, as both Blender and Threejs are open source and I’m pretty sure most threejs users using a 3D modelling tool are using Blender, or at least a lot, how do you guys handle this problem?
Did you find a way to get the exact same axis in threejs as in blender? Also when using gltf as export and import it in threejs?

It would be so nice to finally get rid of this conversionthing. It’s making simple things overly complex, especially when rotating things around.

Looking forward to see what others do.

1 Like

This has never been an issue for me. When exporting, set +Y up in the transform setting.

Screenshot 2022-01-08 at 11.18.19

I know, I do the same, and everything is okay until you start rotating things around in threejs. Than you still have to deal with the threejs axes instead of the blender axis and you have the same issue again.

I’m using blender and threejs interchangably, so I don’t want to think in two different coordinatesystems, but just one for all. We can’t change the blender coordinate system, so I’m looking for a way to adjust the threejs coordinatesystem once per project so everything matches up. But I never figured to get it right for everything, as it needs to work for plain threejs projects, for projects importing gltf from blender, with camera’s created both in threejs and imported from blender via gltf etc.

I never got that right and it’s a frustrating messy workflow. I want to solve that so I can focus and grow on stuff I need to focus on: designing, animating, programming and create beautiful things. Not to keep working on figuring out all these conversion issues every time again.

With so many blender/threejs users I can’t be the only one finding this a problem and I would be surprised if other people keep translating coordinate systems in their heads on each and every project. So I am wondering how other people overcome this issue.

I have to admit that I find it also annoying to convert from blender to threeJS and vice versa. It would’ve been easier if both conventions are the same.

I’m also interested to see how other people deal with this issue !

2 Likes

I’ve gotten used to blender shortcuts so my solution is to use transform controller and work visually in three js

also the entire industry faces this problem …so there’s no safe space for multi 3d software users

3 Likes

Thanks for your responses!

That graphic by Freye Holmer is a very useful overview. Thanks. I am surprised to see that even Maya and 3DS Max handle things differently while being of the same company for a long time now. Guess they were afraid to change it and get angry designers, once taken over that company at the time. Which is understandable.

But thank god I don’t need to use all this. For 3D modeling I just want to use Blender and ThreeJs and sync these up. And because ThreeJs is just javascript it should be possible to create a synced up workflow without too much hastle, right?

I tried once to have projects rotate a scene after import and that was working to a certain extend. But I bumped into issues later. Not sure at the moment what these were though as it was years ago. But I believe it had to do with the camera’s coming from gltf to be okay, but the scene not okay.
Have to dive deeper into it to re-research what the issue with that was.

Still wondering how other people solve this though! It’s interesting to see how people work differently

Well, although not 100% sure yet (still testing), it seems like this thing is solved by just turning off +Y up in the Blender exporter!

When having that checkbox turned off and import that scene in threejs from than on everything seems to work exactly the same as blenders coordinates!

So far I’ve tested:

  • positioning and rotations of objects (including cameras) coming from the gltf file
  • running animations imported from blender (via the gltf file)
  • positioning and rotations of objects created by code with threejs inside the scene loaded from gltf (including cameras!)

After importing a scene from gltf with +Y UP turned off in that blender gltf export the +Z is now up and all axis work just like in blender with these tests!

Would be cool and an easy solution if this works for everthing in the scene!

[edit] I only tested basic stuff like moving and rotating objects from gltf and after importing glft creating from ‘scratch’ in threejs and also animations coming from blender. And all work fine with +Y up turned off in the Blender exporter! Maybe in some advanced things like vertex animations or whatever it might be something else, but I expect that to work too now. So it looks like this one solved it and I now check this one as solution.

1 Like