Using Babylon, Cannon and Webpack

[noxoc]

Hi!

I have to add some interactive 3d things to an existing project and I stumbled over Babylon and I'll give it a try.

The exisiting project is a small React App and I'm using Webpack. However it seems like Babylon/Cannon are not (yet) compatible with Webpack. Well… babylon works fine for itself. But I want to add physics using cannon. 

Has anyone have experience with that? 

[noxoc]

I ended up using this in the webpack.config.js and the prebuilt javascript files: 

externals: {
  'BABYLON': 'BABYLON'
}

Works for now. However: are the best practices how to split up files etc? I currently have my objects set up like this:

import BABYLON, {Mesh} from 'BABYLON';

export default class Ball {
    constructor(name, scene) {
        const mesh = this.mesh = new Mesh.CreateSphere(name, 8, 2, scene);
        mesh.applyGravity = true;
        mesh.checkCollisions = true;
        mesh.physicsImpostor = new BABYLON.PhysicsImpostor(mesh, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.5 }, scene);
    }

    update() {
        this.mesh.rotate.x += 0.1;
    }
}