Three.js 法线贴图强制网格不渲染

Question

我正在使用 Three.js (r64) 来渲染一些模型。我正在使用包含的 THREE.OBJMTLLoader。我正在尝试通过向加载程序提供 .obj 和 .mtl 来渲染椅子。我还有一个法线贴图的 png 我想应用到它。下面是我正在经历的两个屏幕截图。

如果未应用法线贴图，则模型的屏幕截图，请注意颜色与预期一致，但由于未应用法线贴图而显示低分辨率质量：

如果将法线贴图应用于材质的“贴图”字段，则为模型的屏幕截图。请注意，它现在看起来很高分辨率，但颜色不对，可能是因为我将纹理应用于材质：

如果我将纹理应用到材质的“法线贴图”字段，模型就会消失。

下面是我用来渲染模型的代码的 sn-p：

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

        });

我希望我已经很好地解释了我的尝试，我希望它就像在材料中使用不同的属性一样简单。欢迎任何建议。谢谢！

Answer 1

您需要为场景添加灯光，并确保使用回调加载纹理。

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