solved importScene of undefined from undefined version

[Raghavender Mylagary]

Hi,

I am trying to load .babylon file which is exported from blender using typescript and reactjs.
This is the error I got,

importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse

My babylon file is correct, I have tested it in sandbox and works correctly.

Here is the Code:

import * as React from 'react';
import * as BABYLON from 'babylonjs';
import BabylonScene from './BabylonScene';
import 'babylonjs-loaders';

export default class PageWithScene extends React.Component<{}, {}> {

    onSceneMount = (e: SceneEventArgs) => {
        const { canvas, scene, engine } = e;

        BABYLON.SceneLoader.Load('', 'design1.babylon', engine, function(scene) {
        scene.executeWhenReady(function () {
        var camera = new BABYLON.ArcRotateCamera('camera1', 0, 0, 0, new BABYLON.Vector3(12, 0, 0), scene);
        scene.activeCamera = camera;
        camera.setTarget(new BABYLON.Vector3(0, 0, 0));
        camera.attachControl(canvas, true);
        // scene.clearColor = new BABYLON.Color3(0, 0, 0);

        engine.runRenderLoop(() => {
          if (scene) {
            scene.render();
          }
        });
      });
    });
  }
    render() {
        return (
            <div>
                <BabylonScene onSceneMount={this.onSceneMount} />
            </div>
        );
    }

Updated tsconfig.json as well,
}

Please let me know if I am missing anything.

Thanks in advance.

[brianzinn]

Did you check network tab in dev tools (ie: press F12 in chrome) for a 404?  My guess is that it should be:

BABYLON.SceneLoader.Load('', '/folder/design1.babylon', ....)
or
BABYLON.SceneLoader.Load('/folder/', 'design1.babylon', ....)

JSON parse is a good sign you didn't get your model file, but instead perhaps a default/404 HTML page from your webserver.

The other thing to take note of is that SceneLoader.Load(...) will create a new Scene object.
https://github.com/BabylonJS/Babylon.js/blob/a86a04b640f8f25bb4a1ed86067ce735a404979b/src/Loading/babylon.sceneLoader.ts#L497

That scene object is different than the one passed into your method, so once you get the 404 fixed, you could update that if you wanted as your React component is probably creating unnecessarily a Scene object.  Not sure if you got the code from here:
https://github.com/brianzinn/react-babylonJS/blob/master/src/Scene.tsx#L60
If you did then you don't need to create that scene.  I hadn't thought of this scenario, but would be a good parameter to add  { createScene': boolean } to React component.

Cheers.

edit: oh, I see you got the code straight from the docs page   (https://doc.babylonjs.com/resources/babylonjs_and_reactjs)  anyway, that link points to the same line you could remove!

[Raghavender Mylagary]

Thank you brainzinn for replying.

I have checked the network tab and there is no 404 error. The babylon file and my react component both are in same folder. So, I think it is not the problem with getting the model file.

 

[brianzinn]

I could update that doc with this scenario where you create your own scene. Did you try  BABYLON.SceneLoader.Append or new AssetContainer? Or full error trace or live website?

edit: check the response of the model file.  could be HTML of the "404" - ie: if you have a default handler.  usually you do with React projects to return index.html always to work with react router  you probably need to copy the .babylon file somewhere like a /public folder.  Are you using CRA (create react app)?

 

[Raghavender Mylagary]

Thanks brianzinn for your time.

The problem is with the .babylon file. So, the issue is resolved after creating a new file.

[brianzinn]

ok - glad it's working for you!   there's a sticky thread, if you want to mark as solved.  cheers.

[LikithKailas]

@Raghavender Mylagary Hey hi, Can you please elaborate your solution. I am facing the same issue. What do you mean by creating a new file?

 

[brianzinn]

I think he meant that he recreated the .babylon file, so it was maybe corrupt.

If you are using ReactJS and 'react-babylonjs' then a declarative model component was added and you can do:
<Model sceneFilename="file.babylon" rootUrl="/assets/" />.  Please ignore that, if you are not using ReactJS.