RaananW

Announcing Babylon Modules (Beta) - CommonJS and ES6-ready modules in NPM

Recommended Posts

Hello dear community,

I have just pushed a new version of Babylon to NPM. 3.2.0-alpha2 has a bit of changed package structure, which is, in general, transparent to the regular user.

You will still be able to do the following:

import * as BABYLON from "babylonjs";

What's new and exciting about this release are the extra modules that were added to this package. Babylon's npm package now contains commonjs and es6-ready modules, including typescript typings (for the commonjs modules). With the updated package you could do the following in TypeScript (and JavaScript):

import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core";
import { ArcRotateCamera } from "babylonjs/arcRotateCamera";
import { HemisphericLight } from "babylonjs/hemisphericLight";
import { MeshBuilder } from "babylonjs/meshBuilder";

var canvas: any = document.getElementById("renderCanvas");
var engine: Engine = new Engine(canvas, true);

function createScene(): Scene {
    var scene: Scene = new Scene(engine);

    var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);

    var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);

    return scene;
}

var scene: Scene = createScene();

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


window.addEventListener("resize", () => {
    engine.resize();
});

This will be using the commonjs modules available in the babylonjs package.  The file generated (using webpack) will be roughly 2.2 MB unminified (which is an improvement to the 4+MB unminified Babylon file).

To use es6, simple add /es6 after the module name. for example:

import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core/es6";

I have worked a lot to make it work correctly. But there are (probably) many things I did catch. Please:

  1. Be patient! it was just released, there might be a few bugs.
  2. Use it, abuse it, make it fail, and let me know when it did! I want to fix all bugs until 3.2 is officially released

I will write a detailed documentation page about how to use it. For a list of modules, you can refer to config.json in our Gulp directory (until I finish the docs) : https://github.com/BabylonJS/Babylon.js/blob/master/Tools/Gulp/config.json#L21 . Add "core", being the most important package there is.

Enjoy!

Share this post


Link to post
Share on other sites

This is pretty cool!  I had to do a bunch of hacking last year to get models parsing for 3d print done server side on a bjs instance running on node.  I was able to get it functioning and run some csg then polygon optimization on the meshs all on the server, but like I said it took a TON of hacking.  This would handle all that with ease it looks like.

Share this post


Link to post
Share on other sites

@RaananW Hello, I am trying to use this nifty feature, and I am using babylonjs-3.2-alpha4 npm package.

So I am replacing the following line:

    import 'babylonjs'

with

    import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core/es6"

But I am getting error TS2307: Cannot find module 'babylonjs/core/es6'.

I am guessing there is something in the tsconfig.json that I need to change ?

Looking at the local node_modules/babylonjs dir, I don't see core/es6 dir structure though.

Share this post


Link to post
Share on other sites

yep, sorry for not updating here (updated in github only). You can track the progress here - https://github.com/BabylonJS/Babylon.js/issues/3314

In general - until I solve the few problems we had with the standalone modules, they were removed from the package. you can use the es6.js file from the repo. so you can do this:

   import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/es6"

This will load the entire framework in es6-mode and will allow you to work with native es6 modules.

Just a note, if you compile it using webpack, use the UMD version, which will give the same result.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.