Uso GLTFLoader para cargar el modelo en mi aplicación Vue2. Uso la plantilla común Three.js. GLTFLoader se toma directamente de los documentos de Three.js. Mi ejemplo es muy fácil, pero incluso en este caso no puedo cargar el modelo. No tengo idea de qué puede estar mal con mi código, no puedo ver ningún error:

 <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>

Aquí hay un ejemplo reproducible: https://codesandbox.io/s/vue-2-playground-forked-q6lchp?file=/src/components/Model.vue