Three.js Normal Mapping forcing mesh to not render

Question

I am using Three.js (r64) to render some models. I am using the included THREE.OBJMTLLoader. I am trying to render a chair by providing the .obj and .mtl to the loader. I also have a png of a normal map I'd like to apply to it. Below are two screen shots of what I am experiencing.

Screenshot of model if no normal map is applied, notice the color is as expected but shows the lo-res quality since normal mapping isn't applied:

Screenshot of model if normal mapping is applied to the "map" field of the material. Notice it now looks hi-res but the color is not right, probably because of how I'm applying the texture to the material:

If I apply the texture to the "normalMap" field of the material, the model disappears.

Below is a snippet of the code I am using to render the model:

 var chairNormalMap = THREE.ImageUtils.loadTexture('../Models/BanquetChair/BanquetChairNormalMap.png');

        loader.load('../Models/BanquetChair/BanquetChair.obj', '../Models/BanquetChair/BanquetChair.mtl', function (object) {

            materials.push.apply(materials, object.children);

            object.traverse(function (child) {

                if (child instanceof THREE.Mesh) {

                    var chairNormalMaterial = new THREE.MeshPhongMaterial();

                    // if this line is applied, the model will disappear
                    chairNormalMaterial.normalMap = chairNormalMap;

                    // if this line is applied, the normals look great but then the chair is the color of the normal map
                    chairNormalMaterial.map = chairNormalMap;

                    child.material = chairNormalMaterial;

                }

            });

            object.position.y = -80;
            object.receiveShadow = true;
            scene.add(object);

        });

I hope that I have explained my attempts well enough, i'm hoping it's as simple as using a different property in the material. Any suggestions are welcome. Thank you!

Answer 1

You need to add a light to your scene, and make sure your textures are loaded by using callbacks.

var ambientLight = new THREE.AmbientLight( 0x222222 );
scene.add( ambientLight );

var light = new THREE.PointLight( 0xffffff, 1 );
light.position = camera.position;
scene.add( light );

var loader = new THREE.OBJMTLLoader();

var chairNormalMap = THREE.ImageUtils.loadTexture('...png', undefined, function() {

    loader.load('...obj', '...mtl', function ( object ) {

        object.traverse( function ( child ) {

            if (child instanceof THREE.Mesh && child.material instanceof THREE.MeshPhongMaterial ) {

                child.material.normalMap = chairNormalMap;
            }

        });

        object.position.set( 30, 0, 0 );
        scene.add( object );

    });

});

three.js r.64