无法在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。

已解决的问题：

1. 您的 App 组件中的任何位置都没有 Home 组件。
2. 您应该使用 Three 而不是 Three-js

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