无法在 Vue2 中使用 GLTFLoader 加载模型

Question

我使用 GLTFLoader 将模型加载到我的 Vue2 应用程序。我使用常见的 Three.js 模板。 GLTFLoader 直接取自 Three.js 文档。我的示例非常简单，但即使在这种情况下我也无法加载模型。我不知道我的代码有什么问题，我看不到任何错误：

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


<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

export default {
  name: 'Scene',

  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init() {

        this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
        this.camera.position.z = 1;
        this.scene = new THREE.Scene();

        this.renderer = new THREE.WebGLRenderer({antialias: true});
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.$refs.container.appendChild(this.renderer.domElement);

        const loader = new GLTFLoader();
        loader.load("Avocado.glb", (glb) => {
            console.log(glb)
            this.scene.add(glb.scene);
            },
            function (xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
            },
            function (error) {
            console.log("An error happened");
            }
        );
    },

    animate() {
        requestAnimationFrame(this.animate);
        this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
      this.init();
      this.animate();
  }
}
</script>

这是一个可重现的例子：https://codesandbox.io/s/vue-2-playground-forked-q6lchp?file=/src/components/Model.vue

Answer 1

所以我已经修复了 codesandbox 中的当前和后续问题。参见此处：https://codesandbox.io/s/vue-2-playground-forked-tlpdi9.

解决的问题：

您的 App 组件中没有任何 Home 组件。
您应该使用 three 而不是 three-js

上面链接的 codesandbox 中还有更多内容，例如增加相机的远值和添加照明以便您可以看到鳄梨

无法在 Vue2 中使用 GLTFLoader 加载模型

Can't load model using GLTFLoader in Vue2

javascript

three.js

vue.js

vuejs2