我使用Three.js（R64）来渲染某些型号。我现在用的是包括THREE.OBJMTLLoader。我试图通过提供.OBJ和.mtl到加载器来渲染一张椅子上。我也有一个正常的地图为PNG我想申请到它。下面是我所经历的两个屏幕截图。

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.

下面的code我用来渲染模型的一个片段：

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!

推荐答案

您需要将光添加到场景中，并确保你的纹理使用回调加载。

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

three.js r.64