1

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: enter image description here

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: enter image description here

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!

WestLangley
  • 92,014
  • 9
  • 230
  • 236
mvcNewbie
  • 491
  • 1
  • 9
  • 21
  • Are there errors in the console? – WestLangley Jan 08 '14 at 02:34
  • the only error is the following: WEBGL11095: INVALID_OPERATION: clearStencil: Method not currently supported However, I get this error regardless all the time in all situations, so probably not related to this specific issue. – mvcNewbie Jan 08 '14 at 03:31
  • Can you provide a simple live example? -- Not your whole project. – WestLangley Jan 08 '14 at 05:35
  • Hi WestLangley, my appologies I should have done that in the first place. Please see the following jsfiddle http://jsfiddle.net/g96F3/ The model on the left is being rendered with no normal map, the model on the right is being rendered with the normal map as the actual texture. Forgive me for my terminology, still fairly new to 3D. – mvcNewbie Jan 08 '14 at 18:19

1 Answers1

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

WestLangley
  • 92,014
  • 9
  • 230
  • 236
  • Thanks a lot for the help on this one. I updated the jsfiddle for anyone interested. http://jsfiddle.net/g96F3/1/ So I'm guessing when I load the texture it gets streamed in, which is why when I applied the normalMap it would disappear since the texture wasn't fully loaded into memory. My other question is why doesn't the detail of the normalMap show when I only have an ambient light, what is it about a point light that makes it work? Thanks again! – mvcNewbie Jan 08 '14 at 20:53
  • You need to study the fundamentals. See http://stackoverflow.com/questions/11966779/should-i-start-learning-webgl-or-use-three-js/11970687#11970687. – WestLangley Jan 08 '14 at 21:11
  • Thank you for that link, I think it's a great idea to start from the ground up for full understanding. On a side note, It seems that when I run the example http://jsfiddle.net/g96F3/1/ on chrome, it works great. On IE 11 the model does not show up. Could there be a possible workaround I could do to be compatible with both browsers or am I out of luck for the normal mapping when it comes to IE? Thanks again! – mvcNewbie Jan 09 '14 at 00:06
  • If you have a new issue, you need to make a new post so someone knowledgable about that browser can help you. – WestLangley Jan 09 '14 at 02:09
  • 1
    @mvcNewbie Any chance you can update your fiddle, i'd like to see this – Neil Feb 07 '14 at 20:06