Babylon with React - CANNON is not defined

Bugs
1

Hi guys,

I’m trying to develop an interface in React with a custom babylon scene.

When i’m trying to load my custom scene with SceneLoader.Load() the console give me a "BJS - CANNON is not defined’

I have installed Cannon with npm

Here is my code for the component that load the scene :

import * as React from 'react';
import 'babylonjs-loaders';
import Scene from './component/Scene';
import {
  SceneLoader,
} from "babylonjs";

export default class App extends React.Component {
    onSceneMount = () => {

        SceneLoader.Load("/scene/", "scene.babylon", this.engine, (scene) => {

            this.scene = scene;
      
            // No camera?
            if (!this.scene.activeCamera) {
              this.scene.createDefaultCamera(false, true, true);
            }
      
            // Attach camera
            this.scene.activeCamera.attachControl(this.canvas, true);

            this.engine.runRenderLoop(() => {
                this.scene.render();
              });
        });
    }

    render() {               
        return (
            <div>
                <Scene onSceneMount={this.onSceneMount} />
            </div>
        )
    }
}
2

Ohhhhh I see it is because the loader creates the plugin this way: physicsPlugin = new CannonJSPlugin();

But in ES6, cannon needs to be injected inside of it. I will add a special fix into the loader to solve it.

3

Hi ! Thanks for youre quick answer !

Can I already fix it by injecting by my self ?

4

Unfortunately no cause we do not pass parameters to the plugin at the moment.

5

Okay ! Hope it will be fixed soon !

Thank you again !

6

Actually if you use webpack you can do ES6 - Babylon.js Documentation

module.exports = {
context: __dirname,
…
plugins: [
new webpack.ProvidePlugin({
‘cannon’: ‘cannon’
})
]
}

7

I’m not sure if I can do that with a React Create App project

8

Else in 2 days you ll be able to do:

import * as React from ‘react’;
import ‘babylonjs-loaders’;
import Scene from ‘./component/Scene’;
import {
SceneLoader,
BabylonFileLoaderConfiguration
} from “babylonjs”;

import * as MyCannon from “cannon”;

BabylonFileLoaderConfiguration.LoaderInjectedPhysicsEngine = MyCannon ;

9

Hi ! I have tried your first solution but this is not working, please let me know when you will have updated CANNON :slight_smile: !

10

Cannon should not need to get updated and the injection should work. This is pretty strange i ll tryto creat a small sample at the beginning of next week.