OBJLoader 和 MTLLoader 不在 ThreeJS 中渲染 png/纹理答案

【问题标题】：OBJLoader and MTLLoader aren't rendering png/texture in ThreeJSOBJLoader 和 MTLLoader 不在 ThreeJS 中渲染 png/纹理
【发布时间】：2017-08-23 20:52:14
【问题描述】：

我导入了包含 .obj .mtl 和一堆 jpeg 和 pngs 的 3D 模型

尝试使用像这样的 /images 加载模型

但是，我得到的只是一个像他这样的黑人模特

我想知道我在遵循使用这两个加载器的指南时错过了什么。

这是我的代码。

//loader 
var MTTLoader = new THREE.MTLLoader();
MTTLoader.setPath( '/assets/HotAirBalloonIridesium/' );
MTTLoader.load('Air_Balloon.mtl',(materials) => {
    console.log(materials);
    materials.preload()
    var objLoader = new THREE.OBJLoader();
    objLoader.load('/assets/HotAirBalloonIridesium/Air_Balloon.obj', (object) => {
        console.log(materials)
        objLoader.setMaterials(materials)
        scene.add(object);
    })
})

我想知道我缺少什么，因为我的资产文件夹包含所有模型文件

【问题讨论】：

标签： javascript three.js objloader

【解决方案1】：

尝试加载 obj 使用

    var loader = new THREE.OBJLoader( manager );
            loader.load( 's_v1.obj', function ( object ) {

                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh ) 
                    {

                        // child.material.map = texture2;
                        // child.material.specularMap=texture;
                        // child.material.map=texture;

                    }
                } );

                // object.position.x = - 60;
 //                object.rotation.x = 0; //20* Math.PI / 180;
 //                object.rotation.z = 0;//20* Math.PI / 180;
                object.scale.x = 80;
                object.scale.y = 80;
                object.scale.z = 80;
                obj = object
                scene.add( obj );
                animate(obj);

            } );

【讨论】：

似乎无法解决问题。我已将相同的 obj 和 mtl 文件上传到在线查看器，以仔细检查问题是否与我加载它的方式有关。该对象已很好地加载了材料。不过感谢您的帮助。

【解决方案2】：

好的快速更新，加载器没有任何问题，但我使用了错误的照明，因为 Phong 材料需要

var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.50);

var dirLight = new THREE.DirectionalLight(0xffffff, 0.50);

显而易见。

【讨论】：

【解决方案3】：

您必须在加载 obj 之前调用“setMaterials”。

//loader 
var MTTLoader = new THREE.MTLLoader();
MTTLoader.setPath( '/assets/HotAirBalloonIridesium/' );
MTTLoader.load('Air_Balloon.mtl',(materials) => {
    console.log(materials);
    materials.preload()
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials); // "setMaterials" must before "load"
    objLoader.load('/assets/HotAirBalloonIridesium/Air_Balloon.obj', (object) => {
        console.log(materials)
        scene.add(object);
    })
})

【讨论】：