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

时间:2014-01-07 22:21:24

标签: 3d three.js

我正在使用Three.js(r64)来渲染一些模型。我正在使用包含的THREE.OBJMTLLoader。我试图通过将.obj和.mtl提供给加载器来渲染椅子。我还有一个普通地图的png我想申请它。以下是我正在经历的两个屏幕截图。

如果没有应用法线贴图,模型的屏幕截图,注意颜色是预期的,但显示低分辨率质量,因为未应用法线贴图: enter image description here

如果将法线贴图应用于材质的“贴图”字段,则会显示模型的屏幕截图。请注意它现在看起来很高,但颜色不对,可能是因为我将纹理应用于材质: enter image description here

如果我将纹理应用于材质的“normalMap”字段,模型将消失。

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

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

        });

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

1 个答案:

答案 0 :(得分: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