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

Question

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

尝试使用/图像加载模型

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

我不知道在遵循使用这两个装载机的指导原则时我错过了什么。

这是我的代码。

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

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

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

            } );

Answer 2

好的快速更新，装载机没有任何问题，但我使用了错误的灯光，因为需要使用Phong材料

var hemiLight = new THREE.HemisphereLight（0xffffff，0xffffff，0.50）;

var dirLight = new THREE.DirectionalLight（0xffffff，0.50）;

显而易见。

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