Three.js
654 kB min / ~170 kB gz (full build)Build 3D scenes in the browser with cameras, lights, materials, and geometry.
See It in Action
Real 3D scenes running in your browser — lights, shadows, and geometry you can not fake with CSS.
A 3D cube with realistic lighting and shadows — the "Hello World" of Three.js. CSS cannot do real-time lighting or shadow casting.
What is Three.js?
Three.js is a JavaScript library for creating 3D graphics in the browser. It gives you a simple way to build scenes with cameras, lights, materials, and shapes — without writing raw WebGL shader code yourself.
You describe what you want (a box, a light, a camera angle) and Three.js handles the low-level GPU work. It also includes loaders for 3D models (GLTF, OBJ, FBX), orbit controls for mouse interaction, and post-processing effects like bloom and depth-of-field.
When to Use Three.js
How Three.js Compares
Three.js has a larger community and more third-party tutorials. Babylon.js ships more features out of the box — built-in physics, a GUI system, and a live inspector tool.
Different tools for different dimensions. Three.js renders 3D scenes with WebGL. PixiJS is a fast 2D renderer for sprites, particles, and canvas games.
CSS 3D handles card flips and perspective effects. Three.js is for actual 3D scenes with custom geometry, lighting, textures, and shadows.
Get Started with Three.js
npm install threeyarn add three<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>import * as THREE from "three";
// Create scene, camera, renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75, window.innerWidth / window.innerHeight, 0.1, 1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Add a cube with a material that reacts to light
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Add light — without this the cube would be black
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));
camera.position.z = 3;
// Render loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();