Question

我正在使用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);

        });

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

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

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

1 个答案: