使用ThreeJS+Webpack 5加载GLB模型时遇clipObject未定义错误求解决

1. 配置Webpack处理GLB资源 #

Webpack 5需要为GLB这类二进制资源添加加载规则，在webpack.config.js的module.rules中补充：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      // ...已有的规则
      {
        test: /\.(glb|gltf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ]
  }
};

该配置会让Webpack正确打包GLB文件，并返回可被GLTFLoader识别的资源URL。

2. 修正模型加载后的动画处理逻辑 #

clipObject is undefined错误大多源于代码尝试处理模型动画，但目标模型无动画资源，或处理逻辑未做判空。检查你的onLoad函数，添加动画存在性判断：

function onLoad(gltf, position) {
  const model = gltf.scene;
  model.position.copy(position);
  scene.add(model);

  // 仅当模型包含动画时才执行动画处理
  if (gltf.animations.length > 0) {
    const mixer = new THREE.AnimationMixer(model);
    gltf.animations.forEach(clip => {
      mixer.clipAction(clip).play();
    });
    // 可将mixer存入数组，在动画循环中更新
    mixers.push(mixer);
  }
}

如果你的乐高模型本身无动画，直接移除动画处理代码也可解决错误。

3. 对齐ThreeJS核心与扩展库版本 #

检查package.json中three的版本，确保GLTFLoader、OrbitControls等扩展库与核心ThreeJS版本完全一致，避免版本不兼容导致内部逻辑报错。示例依赖配置：

{
  "dependencies": {
    "three": "^0.158.0"
  }
}

所有扩展库均从对应版本的three/examples/jsm/路径导入，禁止混用不同版本资源。

4. 验证模型文件完整性 #

用ThreeJS官方编辑器打开你的GLB模型，确认模型本身无损坏，能正常加载渲染，排除模型文件问题。

按以上步骤调整后即可正常渲染GLB模型。

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