Struggling with importing a gltf file into vue.js using babylon.js to create a 3D view on a webpage. The documentation online isn't very clear, and I've tried the following steps in my Hello.vue file:
<div>
<h1> Hello </h1>
<Scene>
<Box :position="[0, 0, 5]"></Box>
</Scene>
</div>
</template>
<script src = "./Hello.js">
</script>
In my Hello.js file, here's what I included:
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 () {
// Creating a scene.
var scene = new BABYLON.Scene(engine);
// Default skybox creation 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);
// Adding the glTF model to the scene.
BABYLON.SceneLoader.Append("../assets/magic_book_of_eden/", "scene.gltf", scene, function (scene) {
// Creating default arc rotate camera and light.
scene.createDefaultCameraOrLight(true, true, true);
// Adjusting camera angle by 180 degrees.
scene.activeCamera.alpha += Math.PI;
});
return scene;
};
If anyone could provide a specific example or guide on how to achieve this task, that would be greatly appreciated! The gltf model is sourced from sketchfab. Thank you!
Output: