Three.js中OBJ与MTL加载器联用失效及模型缩放差异求助

问题描述 #

我在使用Three.js加载模型时遇到以下问题：

• 同一模型的OBJ+MTL版本，联用OBJ与MTL加载器时模型无法在浏览器显示；
• 仅用OBJ加载器时模型可显示但无纹理；
• GLB版本模型用GLTF加载器可正常显示且纹理正确；
• OBJ模型尺寸远大于GLB版本，文件体积也是后者的四倍，怀疑问题出在导出环节。

我的目标是通过OBJ+MTL加载器成功加载模型。相关代码、文件夹结构如下：

相关代码 #

OBJ单独加载代码 #

const objLoader = new THREE.OBJLoader();
objLoader.load( "model/test.obj", function( object ) {

    scene.add( object );
    object.scale.set(0.001, 0.001, 0.001);
    object.rotateX(-Math.PI/4);
    console.log( object );

});

OBJ+MTL联用加载代码 #

var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( "model/test.mtl", function( materials ) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.load( "model/test.obj", function( object ) {
        
        scene.add( object );

    });

});

GLTF加载器代码 #

const gltfLoader = new THREE.GLTFLoader( manager );
gltfLoader.load( "model/test.glb", function( gltf ) {

    model = gltf.scene;
    model.rotateX( -Math.PI/2 );
    scene.add( model );
    console.log( model );

});

完整项目代码 #

main.js

let scene, camera;

init();


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Function init() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function init() {
    
    // ---------------------- General settings ----------------------
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 0.1, 1000 );      
    camera.position.x = 15.6;
    camera.position.y = 18.7;
    camera.position.z = -12.3;

    const ambiLight = new THREE.AmbientLight( 0xFFFFFF, 0.5 );
    scene.add(ambiLight);

    const spotLight = new THREE.SpotLight( 0xFFFFFF, 0.6 );
    spotLight.position.set( 23.5, 10.0, 7.5 );
    spotLight.castShadow = true;
    scene.add( spotLight );
    
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.load( "model/test.mtl", function( materials ) {

        materials.preload();

        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials( materials );
        objLoader.load( "model/test.obj", function( object ) {
            
            scene.add( object );

        });

    });
    
    // ---------------------- Renderer settings ----------------------
    const renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.shadowMap.enabled = true;
    document.body.appendChild( renderer.domElement );
    
    renderer.setClearColor( 0xffffff, 0 );

    // ---------------------- Orbit Controls settings ----------------------
    const controls = new THREE.OrbitControls( camera, renderer.domElement );

    // ---------------------- Call functions ----------------------
    update( renderer, scene, camera, controls );

}


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Function update() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function update( renderer, scene, camera, controls ) {

    renderer.render( scene, camera );
    controls.update();
    
    requestAnimationFrame( function() {

        update( renderer, scene, camera, controls );

    });

}

main.css

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <script src="lib/three.min.js"></script>
    <script src="lib/MTLLoader.js"></script>
    <script src="lib/OBJLoader.js"></script>
    <script src="lib/orbitControls.js"></script>
    <script src="src/main.js"></script>
</body>
</html>

文件夹结构 #

问题排查与解决方案 #

1. 模型导出环节修复（核心） #

OBJ+MTL加载失败及尺寸、体积异常，基本是导出参数配置错误，需调整以下设置：

• 统一单位：导出OBJ时和GLB使用相同单位（如米），避免尺寸差异过大；
• 修正纹理路径：MTL文件中纹理必须用相对路径（相对于model文件夹），绝对路径或错误路径会导致纹理加载失败，进而引发模型渲染异常；
• 完整导出材质：导出时勾选「导出所有材质」「保留纹理引用」选项，确保MTL文件包含完整材质信息；
• 精简模型数据：OBJ本身无压缩，体积大属正常，但可在导出前清理冗余顶点、面数据，减少文件体积。

2. 加载代码优化 #

即使模型导出正确，加载代码也需适配OBJ特性：

• 保留缩放逻辑：OBJ模型尺寸远大于GLB，必须添加object.scale.set(0.001, 0.001, 0.001)，否则模型会超出相机视锥体而不可见；
• 添加错误回调：排查加载失败原因，在加载器中加入错误处理：

  mtlLoader.load(
    "model/test.mtl",
    function(materials) { materials.preload(); /* 后续逻辑 */ },
    null,
    function(error) { console.error("MTL加载失败:", error); }
  );
  objLoader.load(
    "model/test.obj",
    function(object) { scene.add(object); },
    null,
    function(error) { console.error("OBJ加载失败:", error); }
  );
  

• 材质渲染适配：检查MTL材质是否开启正确渲染模式，比如透明材质需手动设置transparent: true。

3. 验证步骤 #

1. 用3D建模软件重新导出OBJ+MTL，严格检查单位、纹理路径、材质选项；
2. 替换模型文件后，查看浏览器控制台的错误信息；
3. 加载成功后调整缩放、旋转参数，确保模型处于相机视锥体内。

内容的提问来源于stack exchange，提问作者stoex