Blender to Three.js Model has wrong rotation and position

Questions
1

I have exported a model from blender and used the gltf loader (glb format). I have not changed the position or rotation of the camera, scene, or model in anyway-- I simply loaded it. What’s going on here? Is there a solution to this besides manually rotating the object?
Interestingly, I exported and loaded the same exact model once before and it was in the correct orientation. The only difference between the 2nd model and the 1st was that I had scaled it a bit (still no position or rotation changes). This is quite peculiar and I’d very much like to get to the bottom of this.

2

I think you’ll need to provide some way to reproduce the problem (e.g. the .blend file, and your code) to get help on this. Are you embedding a camera in the file, and if not, are you sure you have the camera in the same place in Blender and three.js?

3

Thanks for the advice. The model is actually from sketchfab, i don’t believe I am allowed to share it but i’ll look into setting up another .blend file with the same problem. In the meantime, could you elaborate what you mean by “embedding a camera”? I’m aware that I can export the camera with the glb exporter but will the Three.js camera automatically revert to the embedded camera?

4

Not automatically, no, but you can do something like this:

loader.load('foo.glb', (gltf) => {
  var scene = gltf.scene;
  var camera = gltf.cameras[0];
  renderer.render( scene, camera );
});
2 Likes
5

Thanks for the reply. How can I use “camera” globally? I will call it again in orbit controls and the renderer.render code will be placed in a loop code:

let mainLoop = function () {
   requestAnimationFrame(mainLoop);
   renderer.render(scene, camera);
 };

Are the objects in blender supposed to have the same orientation when loaded into three.js via the gltf loader? I do have “z up to y up” checked off during export.

6

Actually, I think I might have found the problem. threejsaxis blenderaxis

After checking the position of my objects, I realized that only the colors for the blender and three.js axis correspond; blue axis in blender is blue axis in three.js, etc. Even though the axis are different, the colors correspond. So when my object is loaded into three.js, it is automatically rotated by 90 degrees. In Blender, my object is +5 units to the right along the green axis; in three.js, the object is +5 units up along the green axis. Are the any ways I can fix this? I already tried “Z up to Y Up” but all it did was flip the object upside down.

7

+Z is up in Blender, whereas +Y is up in three.js. Keeping the Z up to Y up option enabled is generally a good idea, if you want that conversion to happen automatically. If you’re rotating anything in your three.js code that might affect this, you’ll need to share a demo or something. You might also want to try exporting and then loading the model in a viewer like https://gltf-viewer.donmccurdy.com/ to make sure it looks right side up there.

2 Likes
8

It’s crazy the axis are different… When you use the Y up option it doesn’t transform correctly for animations in Blender 2.80.

it works if you upgrade to Blender 2.8.1 and check the option:
Export -> glTF -> Presets -> Animations -> Always sample animations