Babylon.js
~1.4MB min / ~350kb gz (core)A complete 3D engine by Microsoft — physics, audio, GUI, and XR all ship in the box.
See It in Action
Real-time 3D with physics, particles, and PBR materials — all running in your browser.
A 3D scene with orbit camera, PBR-style lighting, and multiple shapes. Drag to rotate — CSS cannot do real-time 3D camera orbit.
What is Babylon.js?
Babylon.js is a free, open-source 3D engine built by a team at Microsoft. You give it a canvas element, and it handles everything needed to render interactive 3D scenes in the browser — lighting, cameras, materials, meshes, and a render loop.
What sets it apart from Three.js is scope: Babylon.js ships with a physics system, a GUI overlay system, an audio engine, a particle system, and WebXR support for VR/AR — all built-in, no plugins required. It also includes a browser-based scene inspector you can activate with one line of code to debug your 3D scenes in real-time.
When to Use Babylon.js
How Babylon.js Compares
Babylon.js is batteries-included: physics, GUI, inspector, and WebXR are built-in. Three.js is smaller (~170kb gz core) and more modular with a larger ecosystem. Choose Babylon for all-in-one, Three.js for flexibility and lighter bundles.
Different tools: Babylon.js is a full 3D engine, PixiJS is a fast 2D renderer. Use PixiJS for sprites and 2D graphics, Babylon.js for anything 3D.
Both are full 3D engines. Babylon.js is fully open-source (Apache 2.0) with no platform tie-in. PlayCanvas has a cloud-based visual editor but some features require a paid plan.
Get Started with Babylon.js
npm install @babylonjs/coreyarn add @babylonjs/core<script src="https://cdn.jsdelivr.net/npm/[email protected]/babylon.js"></script>import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
const canvas = document.getElementById("renderCanvas");
const engine = new Engine(canvas, true);
const scene = new Scene(engine);
const camera = new FreeCamera("camera", new Vector3(0, 5, -10), scene);
camera.setTarget(Vector3.Zero());
camera.attachControl(canvas, true);
new HemisphericLight("light", new Vector3(0, 1, 0), scene);
// Create a sphere — one line!
const sphere = MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
sphere.position.y = 1;
// Create ground
MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
// Render loop
engine.runRenderLoop(() => scene.render());
window.addEventListener("resize", () => engine.resize());