I am utilizing GLTFLoader to import a model into my Vue2 application. My implementation follows the standard Three.js template. I directly copied the GLTFLoader code from the Three.js documentation. Despite creating a simple example, I am facing difficulties in loading the model. I have thoroughly checked my code for errors, but couldn't find any:
<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>
For a reproducible example, you can check: https://codesandbox.io/s/vue-2-playground-forked-q6lchp?file=/src/components/Model.vue