Exported Blender Object Missing Face In THREE.JS

Question

I have an .STL file which I imported into Blender. Then I exported it to .json to load into THREE.JS

Here's what the model looks like inside Blender.

And here's what the model looks like inside my web app after loading it through THREE.js.

And here's the code to load the exported .JSON.

  var loader = new THREE.JSONLoader();
  loader.load('model/floor.json', function(geometry, materials) {
    var materialsArr = materials;
    scope.mesh = new THREE.Mesh(geometry, materialsArr);
    console.log(scope.mesh.material);
    scope.mesh.material.color.setHex(0x8a8d8f);
    scope.mesh.translation = geometry.center();
    scope.mesh.castShadow = true;
    scope.mesh.receiveShadow = true;
    scene.add(scope.mesh);
  }

You'll see that the floor is gone and in place there are lines running. I've tried triangulating the model in Blender before exporting but it didn't fix anything.

Is there some sort of setting or modifier that I didn't set?

Scott Milner Scott Milner · Accepted Answer · 2017-05-02T00:28:44

Your normals are a mess. In Edit Mode in Blender, press Ctrl + N to recalculate your normals before exporting.

Exported Blender Object Missing Face In THREE.JS

1 Answers