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

我正在使用Three.js（r64）渲染一些模型。我正在使用附带的THREE.OBJMTLLoader。我试图通过向加载程序提供.obj和.mtl来渲染椅子。我也有一个png的一个正常的地图，我想适用于它。下面是我正在经历的两个屏幕截图

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

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

如果将纹理应用于材质的“法线贴图”字段，则模型将消失

下面是我用来渲染模型的代码片段：

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

        });

---

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

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

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

控制台中是否存在错误？唯一的错误如下：WEBGL11095:无效的_操作：ClearTencil:方法当前不受支持。但是，我在所有情况下都会遇到此错误，因此可能与此特定问题无关。您能提供一个简单的实例吗？--不是你的整个项目。嗨，韦斯特兰利，我的同事，我本来应该这么做的。请参见下面的JSFIDLE：左侧的模型是在没有法线贴图的情况下渲染的，右侧的模型是在法线贴图作为实际纹理的情况下渲染的。请原谅我的术语，对3D来说还是相当陌生的。非常感谢你在这方面的帮助。我为感兴趣的人更新了JSFIDLE。所以我猜当我加载纹理时，它会被流化，这就是为什么当我应用法线贴图时，它会消失，因为纹理没有完全加载到内存中。我的另一个问题是，当我只有一个环境光时，为什么法线贴图的细节没有显示出来，点光源是什么让它工作的？再次感谢！你需要学习基础知识。看到了。谢谢你的链接，我认为从头开始全面理解是个好主意。另一方面，当我在chrome上运行这个示例时，它似乎工作得很好。在IE 11上，该模型没有出现。是否有一个可能的解决办法，我可以做到兼容这两种浏览器或我的运气正常映射时，涉及到IE？再次感谢！如果您有新的问题，您需要发表一篇新文章，以便了解该浏览器的人可以帮助您。@mvcNewbie如果您有机会更新您的小提琴，我想看看这个