Import / Export Modules in Babylon

Questions
1

Hi Community!

I’m trying to separate my Babylon project through several files.
The way I would like to do this is through the use of Javascript modules.

I would like to do “export function name(){}”
and "import { name } from ‘module.js’ " onto my “MyBabylonGame.js” file

I have tried to run the “basic” Babylon script in a module (“script type=module”) from the HTML

This:

var canvas = document.getElementById("renderCanvas"); 
    var startRenderLoop = function (engine, canvas) {
        engine.runRenderLoop(function () {
            if (sceneToRender && sceneToRender.activeCamera) { sceneToRender.render();} });
    }

    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function() { 
        return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); 
    };
    var createScene = function () {

        var scene = new BABYLON.Scene(engine);
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, true);
        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;
        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
            sphere.position.y = 1;
        var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

// CALL IMPORTED FUNCTION THAT DOES EVERYTHING ELSE HERE

        return scene;
    };

            window.initFunction = async function() {    
                var asyncEngineCreation = async function() {
                    try { return createDefaultEngine();} 
                    catch(e) {
                    console.log("the available createEngine function failed. Creating the default engine instead");
                    return createDefaultEngine(); }
                }

                window.engine = await asyncEngineCreation();
    if (!engine) throw 'engine should not be null.';
    startRenderLoop(engine, canvas);
    window.scene = createScene();};
    initFunction().then(() => {sceneToRender = scene                    
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>

but that gives an ERROR: “Uncaught (in promise) engine should not be null”.

I have no idea what to try next…

Has any one done this? Is there a tutorial I could take a look at?

I’ve seen this Playground from another similar topic (Works fine but not what I want (at least for now :slight_smile: )) :

2

You are using a UMD version as a module script. We are currently not (yet!) supporting module loading directly in the browser, but it is coming soon. At the moment you will still need to use the UMD way, or using global namespacing (the BABYLON namespace). If you are using a packer (like webpack,rollup) use the es6 (@babylonjs/???) packages instead of the UMD packages and then you can import anything you want

2 Likes
3

Hi!

Thanks for taking the time and answering out clear.
I’ll have a look into these other options.

Thanks.