Loading .babylon file to babylon not working (Import Scene of Undefined)

Questions
1

Hello everyone, Right now I am having an issue with loading a .babylon file to my vue-babylonjs scene. I`m not a professional, so I have to apologize in advance, if I’m not familiar with all aspects.

This is my code in my component. I also have the .babylon file within my components folder.

<template>
  <div>
      <canvas id="renderCanvas"></canvas>
</div>
</template>

export default {
  import * as BABYLON from 'babylonjs'
  import 'babylonjs-loaders'
  data: function() {
    return {
      scene: null,
      engine: null,
      canvas: null,
      mainCamera: null,

    };
  },
      methods: {
        init: function () {
          const _this = this
          this.canvas = document.getElementById("renderCanvas")
          this.engine = new BABYLON.Engine(this.canvas, true)
          this.scene = new BABYLON.Scene(this.engine)

          this.mainCamera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1.5, 1.3, 20, BABYLON.Vector3.Zero(), this.scene)
          this.scene.beforeRender = function () {

          }
          this.engine.runRenderLoop(function () {
            _this.scene.render()
          })
          BABYLON.SceneLoader.Append("./", "fox.babylon", this.scene, function (scene) {

});


        },
mounted() {
    this.init()
}
}

I also tried to load my .babylon file to sandbox, and it works fine.

But I get the following error message:

JS - [23:04:48]: Unable to load from /fox.babylon: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse e._ErrorEnabled @ webpack-internal:///./node_modules/babylonjs/babylon.js:16

In my network I get a 304 Error, initialized by babylon.js in line 16. I could add the code from that line here, but it is a few pages long so I’m not sure how useful that would be…

I really appreciate your time and would be happy if someone could help!

1 Like
2

Hello and welcome!

I’m not a Vue user but this should not be a problem to use with Babylon.js (we have several users doing the same).

Do you see an error in the network monitor? Maybe the .babylon is not served by your server as the MIME type is maybe blocked?

3

Thanks al lot for your response! There is a 304 Error in my network tab in chrome, the type is xhr. I stumbled across MIME types before, but I never worked with them before. I know that I can add a MIME type within my web.config file. But I think my project does not contain such a file. Can I just add a web.config file?
I´m using the webpack-dev server right now.

4

Just to test / verify that a MIME type addition solves your problem, you could change the extension of the file to .txt & the corresponding load code. Always good to solidly identify a problem before making changes to server configuration.

5

Do you mean like that?

this.assetsManager = new BABYLON.AssetsManager(this.scene)
this.assetsManager.addTextFileTask(‘text’, ‘./fox.txt’)
this.assetsManager.load()

The status is still 304:

image
image825×29 1.13 KB

with no other errors in my console.

6

I meant with scene.Append like your first post had. The extension of the file being .txt just tells the server to send a text file. Append doesn’t care what it is called. This is not meant as a solution, just if it works, you know for sure you have a MIME setup problem & nothing else.

7

Oh sorry I didn’t get that right! But anyways it’s not working either. I get the same Status + “Unable to load from ./fox.txt” error message.

8

I know it might sound stupid. But did you check where webpack puts your asset? Maybe after compiling your relative path ./fox.babylon is not correct.

9

No that’s not stupid, since I haven’t done that! But could you explain, how I can find out where webpack puts my assets after compiling? You see, I’m a real newby!
I also moved my file to my assets folder and tried again. Now I’m getting a Status 200, but my file isn’t loading yet and the error in my console still appears…

10

Well I don’t know how you setup your webpack.config file. Do you have that file anywhere in the dist folder (or however you called the folder where webpack compiles files). Webpack on it’s own will not move your assets from public/src folder into destination folder.

I am not sure how it works on Vue but for me I use html-webpack-plugin which compiles my html file into destination folder, so to have access to the assets you have to move assets from your public folder to that same dist folder, so you can setup relative paths.

What I do is I use copy-webpack-plugin, which literally does that, copies files from one place to another.

11

If you manually move the file where it should be, it should work, which your status 200 proves. But I don’t know what’s the problem after that. Maybe you have some error inside the code itself.

12

Clearly you have / had multiple problems. Making sure you only have one problem before you starting playing with unfamiliar server settings is still advised. BTW, did the file have a 200 regardless of extension?

Also, are you getting the exact same error as shown above, a JSON parse? Your first post said you ran in sandbox. You might want to switch to babylon.max.js. To get a closer look than line 16. The minified file has extremely long lines.

13

Yes, I always get the 200 no matter what extension. I also tried to upload a .png picture to my scene, just to see if that works, but I always get the exact same error with a 200 status.
image
I also used babylonjs.max, so the reference to line 106123 may be more helpful?

14

Have you tried some other method of importing, like SceneLoader.ImportMesh or using assetManager?

15

Yes, I tried to import a .png file with assetsManager.addImageTask but I always get the same console error and my Network tab shows 200…

16

I also tried addTextFileTask with a .txt but same here

17

Well. My best guess is that something is wrong within your code xD, or with Vue has some special steps you need to do to make everything work. I am not Vue user so I cannot help you there.

18

Hello, have you run correctly

npm install --save babylonjs babylonjs-loaders

You’re code is strange (for me), i usually do :

Test.vue

<template>
  <div>
      <canvas id="renderCanvas"></canvas>
</div>
</template>

<script>
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

export default {
  data: function() {
    return {
      scene: null,
      engine: null,
      canvas: null,
      mainCamera: null,
    };
  },
  methods: {
        init: function () {
          const _this = this
          this.canvas = document.getElementById("renderCanvas")
          this.engine = new BABYLON.Engine(this.canvas, true)
          this.scene = new BABYLON.Scene(this.engine)

          this.mainCamera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1.5, 1.3, 20, BABYLON.Vector3.Zero(), this.scene)
          this.scene.beforeRender = function () {

          }
          this.engine.runRenderLoop(function () {
            _this.scene.render()
          })
          BABYLON.SceneLoader.Append("./", "fox.babylon", this.scene, function (scene) {

       });
   },
   mounted () {
        this.init()
    }
}
</script>

Regards,

1 Like
19

Thanks, anyway! @nogalo

Oh it seems like I forgot to copy the opening script-Tag into my Question! I think my scene works fine, since I can already tried to add boxes, lights, etc and that worked well. Just loading assets is not working and that is really annoying…