How to install Babylon.js

Created

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

It was initially released in 2013 having been developed by two Microsoft employees, David Catuhe and David Rousset in their free time, helped by artist Michel Rousseau as a 3D games engine. In 2015, it was presented at the WebGL Conference in Paris. As of 2018, it has more than 190 contributors and following its promotion and application in games, including one by Ubisoft.

Installation

You can download the latest version of Babylon.js from the GitHub releases or use a Babylon.js CDN.

Cloning a repository

You can clone a repository from GitHub.com to your local computer.
Cloning with HTTPS URLs
git clone https://github.com/BabylonJS/Babylon.js.git
Cloning with SSH URLs
git clone [email protected]:BabylonJS/Babylon.js.git
Cloning with GitHub CLI
gh repo clone BabylonJS/Babylon.js

Install via NPM package

Run the following command to locally install the package and its dependencies with NPM.
Downloading and installing packages locally
npm i babylonjs
npm install babylonjs
yarn add babylonjs
Downloading and installing packages globally
npm i -g babylonjs
yarn global add babylonjs
Install Specific Version of a Package
npm install [email protected]
Bower
bower install babylonjs

Usage

Scene and Model

// Get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
// CreateScene function that creates and return the scene
var createScene = function(){
    // Create a basic BJS Scene object
    var scene = new BABYLON.Scene(engine);
    // Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
    // Target the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    // Attach the camera to the canvas
    camera.attachControl(canvas, false);
    // Create a basic light, aiming 0, 1, 0 - meaning, to the sky
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    // Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
    var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);
    // Move the sphere upward 1/2 of its height
    sphere.position.y = 1;
    // Create a built-in "ground" shape; its constructor takes 6 params : name, width, height, subdivision, scene, updatable
    var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
    // Return the created scene
    return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
    scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
    engine.resize();
});

Say Hello to Your First World

const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

const createScene =  () => {
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));
    const box = BABYLON.MeshBuilder.CreateBox("box", {});
    return scene;
}