Estoy tratando de importar un archivo gltf en vue.js usando babylon.js y agregar una vista tridimensional a la página web. No puedo entender cómo hacerlo y la documentación en línea también es bastante vaga. Esto es lo que probé: esto es lo que puse en el archivo Hello.vue

 <div> <h1> Hello </h1> <Scene> <Box :position="[0, 0, 5]"></Box> </Scene> </div> </template> <script src = "./Hello.js"> </script>

Esto es lo que puse en el archivo Hello.js

 import vb from 'vue-babylonjs'; import Hello from './Hello.vue'; Vue.use(vb); new Vue({ components: { Hello }, render: c => c('Hello'), }).$mount('#app'); var delayCreateScene = function () { // Create a scene. var scene = new BABYLON.Scene(engine); // Create a default skybox with an environment. var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("../assets/magic_book_of_eden/textures/material_0_baseColor.png", scene); var currentSkybox = scene.createDefaultSkybox(hdrTexture, true); // Append glTF model to scene. BABYLON.SceneLoader.Append("../assets/magic_book_of_eden/", "scene.gltf", scene, function (scene) { // Create a default arc rotate camera and light. scene.createDefaultCameraOrLight(true, true, true); // The default camera looks at the back of the asset. // Rotate the camera by 180 degrees to the front of the asset. scene.activeCamera.alpha += Math.PI; }); return scene; };

Si es posible, ¿podría alguien explicar usando un ejemplo cómo se podría hacer eso? Estoy obteniendo el modelo gltf de sketchfab. ¡Gracias!

Producción: