Hey there,
I am trying to implement a Babylon example into my vue project but I am unable to load a .babylon scene with the Babylon scene loader. The code runs on a local server.
Whenever I try to load it I get this error:
I use the BablonyJS and BabylonJS-loaders version ^4.2.0-rc.3.
The File gets downloaded correctly with the status 200 inside the network tab.
I tested the same Code without the vue application with plain css and js and it works perfectly.
I cannot get my head around this pls help.
here is the Code:
<template>
<div>
</div>
</template>
<style>
</style>
<script>
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';
export default {
inject: ["getEngine", "getCanvas"],
data: () => ({
}),
computed: {
engine: function () {
return this.getEngine();
},
},
watch: {
engine: function (newEngine, oldEngine) {
this.initialize();
},
},
methods:{
initialize(){
var demo = {
scene: "TheCar",
incremental: false,
binary: true,
doNotUseCDN: false,
collisions: true,
offline: false,
onload: function () {
scene.getMeshByName("C-Max_Pneu_arrière_gauche").material.bumpTexture = null;
scene.getMeshByID("b73467cc-d1b0-4b8b-a767-12a95e0e28cf").alphaIndex = 0;
}
};
var canvas = this.getCanvas();
var sceneChecked;
// Babylon
var engine = this.getEngine();
var scene;
var loadScene = function (name, incremental, sceneLocation, then) {
sceneChecked = false;
BABYLON.SceneLoader.ForceFullSceneLoadingForIncremental = true;
engine.resize();
var dlCount = 0;
BABYLON.SceneLoader.Load(sceneLocation + name + "/", name + incremental + ".babylon", engine, function (newScene) {
console.log(sceneLocation + name + "/"+ name + incremental + ".babylon");
scene = newScene;
scene.executeWhenReady(function () {
canvas.style.opacity = 1;
if (scene.activeCamera) {
scene.activeCamera.attachControl(canvas);
if (newScene.activeCamera.keysUp) {
newScene.activeCamera.keysUp.push(90); // Z
newScene.activeCamera.keysUp.push(87); // W
newScene.activeCamera.keysDown.push(83); // S
newScene.activeCamera.keysLeft.push(65); // A
newScene.activeCamera.keysLeft.push(81); // Q
newScene.activeCamera.keysRight.push(69); // E
newScene.activeCamera.keysRight.push(68); // D
}
}
if (then) {
then();
}
});
}, function (evt) {
if (evt.lengthComputable) {
engine.loadingUIText = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
} else {
dlCount = evt.loaded / (1024 * 1024);
engine.loadingUIText = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
}
});
canvas.style.opacity = 0;
};
// Render loop
var renderFunction = function () {
// Render scene
if (scene) {
if (!sceneChecked) {
var remaining = scene.getWaitingItemsCount();
engine.loadingUIText = "Streaming items..." + (remaining ? (remaining + " remaining") : "");
if (remaining === 0) {
sceneChecked = true;
}
}
scene.render();
// Streams
if (scene.useDelayedTextureLoading) {
var waiting = scene.getWaitingItemsCount();
if (waiting > 0) {
status.innerHTML = "Streaming items..." + waiting + " remaining";
} else {
status.innerHTML = "";
}
}
}
};
// Launch render loop
engine.runRenderLoop(renderFunction);
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
var sceneLocation = "/Scenes/";
var mode = "";
if (demo.incremental) {
mode = ".incremental";
} else if (demo.binary) {
mode = ".binary";
}
if (demo.offline) {
engine.enableOfflineSupport = true;
}
else {
engine.enableOfflineSupport = false;
}
loadScene(demo.scene, mode, sceneLocation, function () {
BABYLON.StandardMaterial.BumpTextureEnabled = true;
if (demo.collisions !== undefined) {
scene.collisionsEnabled = demo.collisions;
}
if (demo.onload) {
demo.onload();
}
for (var index = 0; index < scene.cameras.length; index++) {
var camera = scene.cameras[index];
var option = new Option();
option.text = camera.name;
option.value = camera;
if (camera === scene.activeCamera) {
option.selected = true;
}
}
});
}
},
}
</script>