I use GLTFLoader
to load model to my Vue2 app. I use common Three.js template. GLTFLoader
is taken directly from Three.js docs. My example is very easy but even in this case I can't load the model. I have no idea what can be wrong with my code, I can't see any errors:
<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>