Faces invisible from one side using Three.js

3d, javascript, three.js

Solution

Add the double sided flag on the material. Assuming you have something like:

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

add:

material.side = THREE.DoubleSide;

or when you create the material do:

material = new THREE.MeshLambertMaterial ({ color: 0xFF00FF, side: THREE.DoubleSide });

EDIT: For the OBJMTL loader that returns an Object3D we would then need to traverse the object to set the appropriate flag:

if (object instanceof THREE.Object3D)
{
    object.traverse (function (mesh)
    {
        if (! (mesh instanceof THREE.Mesh)) return;

        mesh.material.side = THREE.DoubleSide;
    });
}

Problem

I have an OBJ file with JPG texture loaded into a page - from one side the faces are visible, but from the other they are invisible. Faces visible (a little dark - sorry!) Other side - faces not visible. I tried adding `model.doubleSided = true;` but that doesn't seem to change anything.

Original source