.obj Models and normals

Question

I been working on Three.js for a month now, mostly learning how it works and what can i do. Now, i'm trying to do a Car Expo by uploading .obj models of the cars. My problem is that some of the faces of the car are invisible from some points of view like in this image.

I'm using both Maya 2012 and Blender 2.5 to work the models uncesfully trying to face the normals or to vertex them, but nothing works. For the uploads, i'm using the .obj and mtl loader in the repository.

Hope you can help me, thanks in advance.

https://f.cloud.github.com/assets/3899568/507362/4e3a7bf0-bd6e-11e2-8a54-47b1949bba69.jpg

Answer 1

The problem is not with the normals nor with the texture coords. There is currently a limit of WebGL where you can only reference 65k vertices per draw call, if you are using gl.DrawElements and the current implementation of the OBJMTLLoader does. So your car model (great model by the way) can not be viewed as is. You need to split it up. You can look in three.js/utils/converters/obj/split_obj.py. But there is an issue with the script, documented at https://github.com/mrdoob/three.js/issues/2397. So you will not be able to see the materials. So export many models from inside Maya or Blender and make sure that the resulting obj does not have a face index greater than 65535. Otherwise split again.

Also in the next release (three.js r59) I believe there will be a NormalHelper function so you will be able to view your normals.

Answer 2

See migration from r49 to r50 :

texture coordinates aren't anymore flipped in the geometries, instead textures have flipY property (true by default); all models need to be re-exported / reconverted (tools have been updated as well). workaround: uv.v = 1 - uv.v;

I had a similar issue, setting flipY to false to the texture solved it.