Blender export to OBJ and load in Three.js, mesh normals and faces wrong

Question

I exported my blender model, to OBJ and loaded it to Three.js.

For the wheels the normals seem to be facing inwards.
For the track, only mesh appears and does not appear to be mapped correctly.

I reimported the OBJ in blender, and it seems to be displaying correctly, so it seems to be a problem in Three.js.

Image in blender showing the normals of the wheels are correct, and the track appears correctly.

Codepen of the Three.js code, and OBJ model is here

var material = new THREE.MeshLambertMaterial({ color: 0xcc8729 });

//Loader for the model
var loader = new THREE.OBJLoader();
var geometry = loader.parse(getObjFileAsString());
geometry.position.set(0, 0, 0);
geometry.castShadow = true;
geometry.receiveShadow = true;
geometry.traverse(child => {
  if (child instanceof THREE.Mesh) {
    child.material = material;
  }
});
scene.add(geometry);

Do I need to remodel the wheels and track? Or is there a way to fix it in Three.js?

is the scale of your wheels by chance negative? can you share your blender file? — Madlaina Kalunder

Madlaina Kalunder Madlaina Kalunder · Accepted Answer · 2017-07-28T11:29:18

the question is why was the export to obj flipping the face normals?

my only guess is that you have a negative scale on your objects. Therefore you have to apply scale and rotation shift-a shortcut. Then you should double check if your normals still face outwards. See my answer here.

in Three.js you can also solve flipped normals by playing with your material.side value there is double sided, back and front. source

node.material.side = THREE.DoubleSide;

Blender export to OBJ and load in Three.js, mesh normals and faces wrong

1 Answers