如何正确引入Three.js与GLTFLoader加载人脸滤镜3D模型？

API 探路者

2026-8-4

解决Three.js v0.120.1内嵌GLTFLoader的实例化问题

问题根源

你用的是全局非模块版本的Three.js压缩包，但内嵌的GLTFLoader.js来自Three.js的examples/jsm目录——这部分代码是为ES6模块设计的，默认不会挂载到全局THREE对象上，所以直接调用new THREE.GLTFLoader()会提示不是构造函数，直接用new GLTFLoader()则找不到变量。

修复步骤

1. 修改内嵌的GLTFLoader代码

打开你内嵌到HTML中的GLTFLoader.js代码，做两处修改：

删除开头的import * as THREE from 'three';（你已经通过全局Three.js引入了THREE对象）
在文件最末尾添加一行，将GLTFLoader挂载到全局THREE对象：
```
THREE.GLTFLoader = GLTFLoader;
```

2. 正确实例化GLTFLoader并加载GLB模型

修改后，就可以通过THREE.GLTFLoader正常实例化，加载同目录的GLB模型：

// 实例化加载器
const gltfLoader = new THREE.GLTFLoader();

// 加载GLB模型
gltfLoader.load('./your-model.glb', 
  function(gltf) {
    // 加载成功后的回调：获取模型场景对象
    const modelScene = gltf.scene;
    
    // 根据需求调整模型（比如缩放、位置）
    modelScene.scale.set(0.5, 0.5, 0.5); // 示例：缩小到50%
    
    // 挂载到Jeeliz人脸追踪对象（根据Jeeliz API调整）
    jeelizFaceFilter.addObjectToTrack(modelScene, 'root');
  },
  function(xhr) {
    // 可选：加载进度回调
    console.log(`模型加载进度: ${(xhr.loaded / xhr.total * 100)}%`);
  },
  function(error) {
    // 加载错误回调
    console.error('GLB模型加载失败:', error);
  }
);