Jump to content

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(() => {

window.addEventListener("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.


Link to comment
Share on other sites

  • RaananW changed the title to Announcing Babylon Modules (Beta) - CommonJS and ES6-ready modules in NPM

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.

Link to comment
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'


    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.

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...