Three.js加载GLB 3D模型时import报错、函数无法调用如何解决

• ES模块（添加了type="module"属性的script标签）拥有独立作用域，顶层定义的函数、变量不会默认注册到全局window对象，因此页面全局作用域下直接写Load_Digital_Twin()会找不到对应函数
• 原代码存在未定义对象引用：Digital_Twin对象未做任何声明，直接调用Digital_Twin.Load_Part.Cutter()会触发引用错误
• 使用ES模块语法导入GLTFLoader时，three.js本体也需要通过ES模块方式导入，不能混用全局脚本引入的UMD版本three.js，否则会出现依赖缺失报错
• 原代码缺失three.js运行必需的场景、相机、渲染器初始化逻辑，即使模型加载成功也无法正常显示
• 直接通过file://协议打开本地html文件时，浏览器会限制本地资源加载，GLB模型请求会触发跨域错误

1. 修改index.html文件 #

调整脚本引入方式，修正CSS语法错误，移除全局作用域下的函数调用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            /* 移除原样式大括号外的多余分号，避免样式解析异常 */
            canvas {width: 100%; height: 100%}
        </style>
    </head>
    <body>
        <!-- 移除全局引入的three.js脚本，改用模块内导入 -->
        <script type="module" src="./scripts/Digital_Twin.js"></script>
    </body>
</html>

2. 重写Digital_Twin.js逻辑 #

补全依赖导入、基础场景初始化代码，修正对象引用错误，将启动逻辑放在模块内部执行，不需要暴露到全局：

// 导入three.js ES模块版本和GLTFLoader，注意路径和本地文件存放位置匹配
import * as THREE from './Imported/three.module.js';
import { GLTFLoader } from './Imported/GLTFLoader.js';

// 初始化three.js核心组件
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加基础环境光，避免模型加载后呈纯黑色
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);
camera.position.z = 5;

const Load_Part = {};
Load_Part.Cutter = function () {
    const loader = new GLTFLoader();
    // 模型路径需和本地实际存放位置一致，确保静态服务器可正常访问
    loader.load('../models/CutterHead.glb', function (gltf) {
        scene.add(gltf.scene);
    }, undefined, function (error) {
        console.error(error);
    });
};

function Load_Digital_Twin() {
    Load_Part.Cutter();
    // 启动渲染循环
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
}

// 模块内部直接执行启动逻辑，无需全局调用
Load_Digital_Twin();

3. 本地运行注意事项 #

• 不要直接双击html文件通过file://协议打开，需启动本地静态服务器（如VSCode的Live Server插件、Node.js的http-server工具）访问页面，避免跨域拦截
• 逐一核对所有文件导入路径：three.module.js、GLTFLoader.js、CutterHead.glb的路径需和本地目录结构完全匹配，路径错误会返回404
• 非必要不建议将模块内函数挂载到window全局，若确实需要在外部调用模块内方法，可在模块内添加window.xxx = xxx显式暴露，避免全局变量污染

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