三个 JS GLTF 加载器不适用于 Nuxt 3

Question

我在使用 nuxt 3 实现三个 JS Gltf Loader 时遇到错误。错误消息：“Uncaught (in promise) TypeError: Class constructor Loader cannot be invoked without 'new'..”

版本：

“三”：“^0.148.0”，“三-gltf-loader”：“^1.111.0”

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

<script>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import GLTFLoader from "three-gltf-loader";

export default {
  setup() {
    const container = ref(null);
    const scene = ref(new THREE.Scene());
    const renderer = ref(new THREE.WebGLRenderer({ antialias: true }));
    const width = 700;
    const height = 700;
    const camera = ref(
      new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
    );
    const loader = ref(new GLTFLoader());
    onMounted(async () => {
      renderer.value.setSize(
        container.value.clientWidth,
        container.value.clientHeight
      );
      container.value.appendChild(renderer.value.domElement);
      camera.value.position.z = 5;
      const response = await fetch("logo.gltf");
      const gltf = await response.json();
      loader.value.parse(
        gltf,
        "",
        (gltf) => {
          scene.value.add(gltf.scene);
          renderer.value.render(scene.value, camera.value);
        },
        undefined,
        (error) => {
          console.error(error);
        }
      );
    });

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

Answer 1

“三”：“^0.148.0”，“三-gltf-loader”：“^1.111.0”

不推荐这种设置，因为您可以从three存储库导入最新的GLTFLoader模块。 使用这些导入再试一次：

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

Answer 2

我在 Alvaro Dev Labs 的 YT 频道找到了一个解决方案，他使用 TroisJS 而不是 ThreeJS（实际上是 Vite + Three）。 对于 nuxt 3，您只需将“.client.vue”添加到组件的文件名中，即可在客户端 (Model.client.vue) 上运行它。

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import {
  Renderer,
  Scene,
  Camera,
  PointLight,
  AmbientLight,
  GltfModel,
} from "troisjs";
export default defineComponent({
  components: {
    Renderer,
    Scene,
    Camera,
    PointLight,
    AmbientLight,
    GltfModel,
  },
  setup() {
    const renderer = ref(null);
    const model = ref(null);

    function onReady(model) {
      console.log("Ready", model);
    }

    onMounted(() => {
      renderer?.value?.onBeforeRender(() => {
        model.value.rotation.x += 0.01;
      });
    });

    return {
      renderer,
      model,
      onReady,
    };
  },
});
</script>

<template>
  <div>
    <Renderer ref="renderer" antialias orbit-ctrl resize="window">
      <Camera :position="{ x: -10, z: 20 }" />
      <Scene background="#fff">
        <AmbientLight />
        <PointLight
          color="white"
          :position="{ x: 100, y: 1000, z: 40 }"
          :intensity="1"
        />
        <GltfModel ref="model" src="/Models/logo.gltf" @load="onReady" />
      </Scene>
    </Renderer>
  </div>
</template>

Answer 3

像这样import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'然后像这样使用const loader = new GLTFLoader()