Faces invisible from one side using Three.js

Question

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.

Answer 1

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;
    });
}

Answer 2

Try adding renderer.setFaceCulling( THREE.CullFaceNone );