<template>
<div class="SanxiaModel">
<!-- <div id="sanxiaModel"></div> -->
<canvas id="sanxiaModel" style="width: 100%;height: 100%;"></canvas>
</div>
</template>
<script>
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';
import * as GUI from 'babylonjs-gui';
export default {
name: 'SanxiaModel',
data() {
return {
}
},
mounted() {
this.init();
},
methods: {
init() {
// Get the canvas DOM element
var canvas = document.getElementById('sanxiaModel');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true
});
// CreateScene function that creates and return the scene
var createScene = function() {
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON
.Vector3(0, 0, 2000));
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
var advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
BABYLON.SceneLoader.ImportMesh("","static/gltftest/","Tile_+001_+001.glb",scene,function(mesh){
console.log(mesh);
})
return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function() {
if (scene) {
scene.render();
}
});
// the canvas/window resize event handler
window.addEventListener('resize', function() {
engine.resize();
});
},
}
}
</script>
I recreated a Vue project with only the BabylonJS dependency package in it, and it was able to load my GLB model successfully. I think the previous error was due to the dependency package conflict.
This is my complete project:https://github.com/xwmrzz/sanxia.git.
The path to the model folder is public/static/gltftest and the path to the component is src/components/Model/ModelTest.vue
But I’m able to load your model normally on the Playground: Babylon.js Playground (babylonjs.com), so it really looks like there’s something on how your project is set up.
This is very strange, the problem seems to be in the mocking.js file in the src folder. Normally this file has nothing to do with model loading, but when I delete this file my glb model loads successfully.
Hello,I had the same problem,The model was loaded normally when vue2 was used previously,But I’m using vue3 and I don’t know if it’s a version issue, the model doesn’t load, and the error message is what you mentioned here,May I ask what the problem is?please
Can you share your complete project? A github repository would be great.