Learn Babylonjs - 9 Code Examples & CST Typing Practice Test

Babylon.js is a powerful, open-source 3D engine for the web that enables developers to build immersive 3D games, simulations, visualizations, and XR experiences directly in the browser using WebGL, WebGPU, or WebXR.

View all 9 Babylonjs code examples →

Simple Babylon.js Scene Babylon.js Spinning Sphere Babylon.js Ground Plane Babylon.js Colorful Materials Babylon.js Light Rotation Babylon.js Orbiting Camera Babylon.js Multiple Meshes Babylon.js Animated Sphere Babylon.js Textured Cube

Learn BABYLONJS with Real Code Examples

Updated Nov 25, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Babylon.js Scene

# 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.

Let’s Try →

Babylon.js Spinning Sphere

# 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.

Let’s Try →

Babylon.js Ground Plane

# 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.

Let’s Try →

Babylon.js Colorful Materials

# 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.

Let’s Try →

Babylon.js Light Rotation

# 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.

Let’s Try →

Babylon.js Orbiting Camera

# 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.

Let’s Try →

Babylon.js Multiple Meshes

# 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.

Let’s Try →

Babylon.js Animated Sphere

# 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.

Let’s Try →

Babylon.js Textured Cube

# 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.

Let’s Try →

Frequently Asked Questions about Babylonjs

What is Babylonjs?

What are the primary use cases for Babylonjs?

3D games and interactive worlds. Architectural visualization and digital twins. AR/VR/XR immersive experiences. Scientific and engineering simulations. Product configurators and 3D e-commerce

What are the strengths of Babylonjs?

Extremely feature-rich and modern. High-level API yet highly performant. Great documentation and playground. Built-in support for WebXR. Robust editor for artists and developers

What are the limitations of Babylonjs?

Lower-level than Unity/Unreal. Complex scenes require optimization expertise. Large bundle size for full engine. Limited native tooling compared to heavyweight engines. Learning curve for shader/material systems

How can I practice Babylonjs typing speed?

CodeSpeedTest offers 9+ real Babylonjs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Simple Babylon.js Scene

# 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.

Let’s Try →

Babylon.js Spinning Sphere

# 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.

Let’s Try →

Babylon.js Ground Plane

# 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.

Let’s Try →

Babylon.js Colorful Materials

# 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.

Let’s Try →

Babylon.js Light Rotation

# 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.

Let’s Try →

Babylon.js Orbiting Camera

# 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.

Let’s Try →

Babylon.js Multiple Meshes

# 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.

Let’s Try →

Babylon.js Animated Sphere

# 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.

Let’s Try →

Babylon.js Textured Cube

# 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.

Let’s Try →

Frequently Asked Questions about Babylonjs

What is Babylonjs?

What are the primary use cases for Babylonjs?

3D games and interactive worlds. Architectural visualization and digital twins. AR/VR/XR immersive experiences. Scientific and engineering simulations. Product configurators and 3D e-commerce

What are the strengths of Babylonjs?

Extremely feature-rich and modern. High-level API yet highly performant. Great documentation and playground. Built-in support for WebXR. Robust editor for artists and developers

What are the limitations of Babylonjs?

How can I practice Babylonjs typing speed?

CodeSpeedTest offers 9+ real Babylonjs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.