Learn BABYLONJS with Real Code Examples

# babylonjs/demo/main.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const createScene = function() {
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.ArcRotateCamera('camera', Math.PI/2, Math.PI/4, 5, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), scene);
    const box = BABYLON.MeshBuilder.CreateBox('box', {}, scene);
    scene.registerBeforeRender(() => { box.rotation.y += 0.01; });
    return scene;
};
const scene = createScene();
engine.runRenderLoop(() => { scene.render(); });

A basic Babylon.js program that creates a 3D scene with a spinning cube.

# babylonjs/demo/sphere.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI/2, Math.PI/4, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), scene);
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 2}, scene);
scene.registerBeforeRender(() => { sphere.rotation.y += 0.01; });
engine.runRenderLoop(() => { scene.render(); });

Creates a 3D scene with a spinning sphere.

# babylonjs/demo/ground.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI/2, Math.PI/4, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), scene);
const ground = BABYLON.MeshBuilder.CreateGround('ground', {width: 6, height: 6}, scene);
const box = BABYLON.MeshBuilder.CreateBox('box', {}, scene);
box.position.y = 1;
engine.runRenderLoop(() => { scene.render(); });

Adds a ground plane and a cube on top of it.

# babylonjs/demo/materials.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI/2, Math.PI/4, 7, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox('box', {}, scene);
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 2}, scene);
const boxMat = new BABYLON.StandardMaterial('boxMat', scene);
boxMat.diffuseColor = new BABYLON.Color3(1, 0, 0);
box.material = boxMat;
const sphereMat = new BABYLON.StandardMaterial('sphereMat', scene);
sphereMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
sphere.position.x = 3;
sphere.material = sphereMat;
engine.runRenderLoop(() => { scene.render(); });

Applies materials with colors to different meshes.

# babylonjs/demo/light_rotate.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI/2, Math.PI/4, 6, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.PointLight('light', new BABYLON.Vector3(0, 5, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox('box', {}, scene);
scene.registerBeforeRender(() => { light.position.x = Math.sin(Date.now() * 0.001) * 5; light.position.z = Math.cos(Date.now() * 0.001) * 5; });
engine.runRenderLoop(() => { scene.render(); });

Rotates a light around a static cube.

# babylonjs/demo/orbit_camera.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', 0, Math.PI/4, 8, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox('box', {}, scene);
scene.registerBeforeRender(() => { camera.alpha += 0.01; });
engine.runRenderLoop(() => { scene.render(); });

Camera orbits around a central cube automatically.

# babylonjs/demo/multiple_meshes.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI/2, Math.PI/4, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), scene);
for (let i = -2; i <= 2; i++) {
    const box = BABYLON.MeshBuilder.CreateBox('box' + i, {}, scene);
    box.position.x = i * 2;
}
engine.runRenderLoop(() => { scene.render(); });

Renders multiple cubes in a row.

# babylonjs/demo/bouncing_sphere.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI/2, Math.PI/4, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), scene);
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 1}, scene);
scene.registerBeforeRender(() => { sphere.position.y = Math.abs(Math.sin(Date.now() * 0.002)) * 2; });
engine.runRenderLoop(() => { scene.render(); });

A sphere that bounces up and down over time.

# babylonjs/demo/textured_cube.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI/2, Math.PI/4, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox('box', {}, scene);
const mat = new BABYLON.StandardMaterial('mat', scene);
mat.diffuseTexture = new BABYLON.Texture('https://playground.babylonjs.com/textures/crate.png', scene);
box.material = mat;
engine.runRenderLoop(() => { scene.render(); });

A cube with an image texture applied.