Three.js - Faces missing after Blender import

Question

I tried to import a JSON exported file of my 3D model and import it in Three.js but it seems some faces are missing.

I am not sure if it was an export problem because when I rotate it, the left face exists but the right face does not, vice versa.

Here is my original model in Blender:

var scene, camera, renderer;

var WIDTH  = window.innerWidth;
var HEIGHT = window.innerHeight;

var SPEED = 0.01;

function init() {
    scene = new THREE.Scene();

    initMesh();
    initCamera();
    initLights();
    initRenderer();

    document.body.appendChild(renderer.domElement);
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
    camera.position.set(0, 3.5, 5);
    camera.lookAt(scene.position);
}


function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
}

function initLights() {
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
    directionalLight.position.set( 0, 1, 0 );
    scene.add( directionalLight );
}

var mesh = null;
function initMesh() {
    var loader = new THREE.JSONLoader();
    loader.load('./model.json', function(geometry, materials) {
        mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
        mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.75;
        mesh.translation = THREE.GeometryUtils.center(geometry);
        mesh.position.x = -5;
        scene.add(mesh);
    });
}

function rotateMesh() {
    if (!mesh) {
        return;
    }

    mesh.rotation.y -= SPEED;
}

function render() {
    requestAnimationFrame(render);
    rotateMesh();
    renderer.render(scene, camera);
}

init();
render();

Hope you can help me with this problem. Thanks in advance!

Martin Schuhfuß Martin Schuhfuß · Accepted Answer · 2016-12-04T22:36:26

I would suspect your problem has to do with the face-normals pointing in the wrong direction. To check if this is the case you could try to set all materials to double-sided:

materials.forEach(function(mat) {
  mat.side = THREE.DoubleSide;
});

With Double-Sided mode, the faces are drawn regardless of the normals direction, so you should see all faces if enabled.

Or you could use the THREE.FaceNormalsHelper to have a look at the normals yourself.

scene.add(new THREE.FaceNormalsHelper(mesh, 2, 0x00ff00, 1));

This will render arrows for all faces indicating the normal-direction.

If the normals are wrong you can fix this in blender by selecting all affected faces and using the command Mesh>Faces>Flip Normals from the menu or in the Tools-Panel on the right-hand side in the "Shading/UV"-Tab. Sometimes just selecting all faces and running "Recalculate Normals" from the Tools will work as well. Blender also has a display-mode for face-normals in the right hand menu in the "Mesh Display"-Section.

Three.js - Faces missing after Blender import

1 Answers