Why is this object facing the wrong way when exporting to three.js?

Question

I'm working on a small project using the library three.js

We're using a plugin for Blender which allows us to export the model as a .json file, however the problem I am having is that when I export it and load it into the project, it's facing the wrong direction.

I've gone over the code and I'm sure it's not a coding error because

I have the green line, (y), the red line (x) and a blue line (z), z can't be seen because we're facing directly down at the camera.

In Blender, the model looks as such:

I am certain the error isn't from the coding side but an issue with the exporter add on which I found here: github.com/mrdoob/three.js/tree/master/utils/exporters/blender

So I think I am more or less looking for a solution to fix the importer, it seems to be written in python, I am still searching around for a solution for this but not yet come across one, hoping someone else has had this issue.

Answer 1

Nothing's necessarily wrong, your object just isn't going to be in the same position in ThreeJS as in Blender because the default orientation of the axes is different.

Now, the export system takes care of this. I suspect that your object rotated to make up the difference perfectly, and that the problem is in fact your camera! The same values will cause a different rotation in ThreeJS than in Blender.

You could go to the trouble of manually adjusting to your camera to compensate, but fortunately that isn't necessary. Blender and ThreeJS both have built-in "lookat" functions (here and here, respectively), so you can just export another object to orient them to accordingly (though Blender looks at the entire object while ThreeJS focuses on a single vertex, so make sure the object you use is a small one if you want precision!).

Answer 2

Well there is an easy method of trying to solve your problem, but not a guarantee. You can try flipping the direction of the normals in blender before exporting, and see if that corrects the problem.

Go into edit mode, select all vertices, then click: 'Flip Direction' This will look funny in blender, but if it's just an inverse problem it has a high probability of working.

My other thought is (If Normals don't really matter), I know three.js has a method of making the faces double sided.

See this link

One more thought... You could export as .OBJ and load that into three.js as well. The nice thing with this, is you can also get the Blender Material to follow in a corresponding .MTL file