THREE.MTLLoader不是构造函数错误求助（v3.0）

问题原因 #

你使用了ES模块方式引入加载器（type="module"），但仍在代码中通过THREE全局命名空间访问MTLLoader和OBJLoader——当前Three.js的官方加载器已改为ES模块导出，不会自动挂载到THREE全局对象上。

解决方案步骤 #

1. 修正加载器导入逻辑

在你的主脚本开头添加ES模块导入语句（路径需与你的文件结构匹配），同时将主脚本标签改为type="module"：

<!-- 移除原单独引入MTLLoader/OBJLoader的script标签 -->
<script type="module" src="./js/your-main-script.js"></script>

主脚本内的导入代码：

// 先导入Three.js核心模块
import * as THREE from './js/libs/three.module.js';
// 导入对应加载器
import { MTLLoader } from './js/libs/MTLLoader.js';
import { OBJLoader } from './js/libs/OBJLoader.js';

2. 修改加载函数代码

去掉THREE.前缀，直接使用导入的加载器类：

function loadModel(path, objName, mtlName) {
    const onProgress = function(xhr) {
        if (xhr.lengthComputable) {
            const percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete, 2) + '% downloaded');
        }
    };
    const onError = function(xhr) {};

    const mtlLoader = new MTLLoader();
    mtlLoader.setPath(path);

    mtlLoader.load(mtlName, function(materials) {
        materials.preload();
        const objLoader = new OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath(path);

        objLoader.load(objName, function(object) {
            object.position.set(0, 0, 0);
            object.scale.set(0.2, 0.2, 0.2);
            scene.add(object);
        }, onProgress, onError);
    });
}

3. 验证加载器版本匹配

确保你使用的MTLLoader.js和OBJLoader.js是与当前Three.js版本对应的ES模块版本，需从Three.js官方仓库的examples/jsm/loaders/目录获取，不要使用旧版examples/js/下的非模块版本。

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