Scene Loader with react

Questions
1

Hi Folks, really cant get this to work.

BJS - [11:51:30]: Unable to load from ./babylonJS_logo_v3.babylon: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse

this is a very minimal react component so not sure what I’m missing. Everything else works just not the SceneLoader.

import React, { Component } from "react";

import * as BABYLON from "babylonjs";

class BabylonScene extends Component {

  constructor(props) {

    super(props);

    this.state = { useWireFrame: false, shouldAnimate: false };

  }

  componentDidMount = () => {

    // start ENGINE

    this.engine = new BABYLON.Engine(this.canvas, true);

    //Create Scene

    var scene = new BABYLON.Scene(this.engine);

    scene.clearColor = new BABYLON.Color3(1,0,0);

    var camera = new BABYLON.ArcRotateCamera(

        "Camera",

        4,

        BABYLON.Vector3.Zero(),

        scene

      );

    //LOADER

    BABYLON.SceneLoader.Append(

        "./",

        "babylonJS_logo_v3.babylon",

        scene

    );

    // Render Loop

    this.engine.runRenderLoop(() => {

      scene.render();

    });

  };

  componentWillUnmount() {

    window.removeEventListener("resize", this.onWindowResize, false);

  }

  onWindowResize = event => {

    this.engine.resize();

  };

  render() {

    return (

      <canvas

        style={{ width: window.innerWidth, height: window.innerHeight }}

        ref={canvas => {

          this.canvas = canvas;

        }}

      />

    );

  }

}

export default BabylonScene;
2

The loaders are in a separate package, babylonjs-loaders, that you should import.

3

Ah OK I though that was only for the other file types. Thanks I’ll give it a go.

1 Like