Sign in to follow this  
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

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

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.