Nuxt 3中Three.js GLTFLoader无法使用的报错问题

问题原因 #

你用的three-gltf-loader是第三方旧包，而Three.js从r128版本开始已经把GLTFLoader内置到核心库的addons模块里了。这个第三方包和你当前使用的three@0.148.0版本不兼容，导致继承Loader类时出现构造函数调用错误。

解决方案 #

1. 卸载过时的第三方包
   执行命令移除three-gltf-loader：

npm uninstall three-gltf-loader
# 或使用yarn
yarn remove three-gltf-loader

2. 修改GLTFLoader的导入方式
   替换原有的导入语句，从Three.js内置的addons模块导入：

// 替换 import GLTFLoader from "three-gltf-loader";
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

3. 优化模型加载逻辑（可选但更规范）
   原代码里手动fetch再parse的方式可以直接用GLTFLoader的load方法替代，简化代码：

loader.value.load(
  'logo.gltf',
  (gltf) => {
    scene.value.add(gltf.scene);
    renderer.value.render(scene.value, camera.value);
  },
  (progress) => {
    console.log(`加载进度：${(progress.loaded / progress.total * 100).toFixed(2)}%`);
  },
  (error) => {
    console.error('模型加载失败：', error);
  }
);

修改后的完整代码 #

<template>
  <div ref="container"></div>
</template>

<script>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

export default {
  setup() {
    const container = ref(null);
    const scene = ref(new THREE.Scene());
    const renderer = ref(new THREE.WebGLRenderer({ antialias: true }));
    const camera = ref(
      new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    );
    const loader = ref(new GLTFLoader());

    onMounted(() => {
      // 适配容器尺寸的更新函数
      const updateSize = () => {
        const { clientWidth, clientHeight } = container.value;
        renderer.value.setSize(clientWidth, clientHeight);
        camera.value.aspect = clientWidth / clientHeight;
        camera.value.updateProjectionMatrix();
        renderer.value.render(scene.value, camera.value);
      };

      renderer.value.setSize(container.value.clientWidth, container.value.clientHeight);
      renderer.value.setPixelRatio(window.devicePixelRatio); // 适配高DPI屏幕
      container.value.appendChild(renderer.value.domElement);
      camera.value.position.z = 5;

      // 加载GLTF模型
      loader.value.load(
        'logo.gltf',
        (gltf) => {
          scene.value.add(gltf.scene);
          renderer.value.render(scene.value, camera.value);
        },
        undefined,
        (error) => {
          console.error('模型加载失败:', error);
        }
      );

      // 监听窗口 resize 事件，动态更新画布
      window.addEventListener('resize', updateSize);
    });

    return { container };
  },
};
</script>

<style scoped>
div {
  width: 100%;
  height: 100vh;
}
</style>

额外注意事项 #

• 确保logo.gltf文件放在Nuxt项目的public目录下，否则无法被正确访问
• 如果需要加载压缩后的GLTF模型（如使用DRACO压缩），可同样从three/addons/loaders/DRACOLoader.js导入对应加载器

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