Babylon.js · 1 / 6

Dashboard
Creative coding · Babylon.js

Engine, scene, camera & mesh

Babylon boots from a canvas: create an Engine, then a Scene. An ArcRotateCamera orbits a target; attach pointer controls so learners can tumble the view. Meshes come from MeshBuilder and wear StandardMaterial for diffuse color.

Drag inside the canvas to orbit. Demo B rotates every frame in registerBeforeRender.

// Minimal Babylon scene (CDN)
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);

const camera = new BABYLON.ArcRotateCamera(
  'cam', -Math.PI / 2, Math.PI / 2.5, 8,
  BABYLON.Vector3.Zero(), scene
);
camera.attachControl(canvas, true);

BABYLON.MeshBuilder.CreateBox('box', { size: 1 }, scene);
engine.runRenderLoop(() => scene.render());
Resize

Listen for resize and call engine.resize() so fullscreen layouts stay crisp.

Next

Lights & materials — how Babylon shades meshes.