Three.js Explained: 3D Graphics in the Browser

Introduction

The web is flat by default: HTML and CSS lay out rectangles. But browsers also ship WebGL, a low-level API for talking to the graphics card — powerful, but notoriously verbose (hundreds of lines to draw a single cube). Three.js, created by Ricardo Cabello in 2010, is the library that made WebGL usable: it wraps the graphics pipeline in friendly concepts — scenes, cameras, lights, meshes — so a developer can build a 3D product viewer, a game, or a data visualisation in an afternoon instead of a month.

Scenes, cameras, and meshes

Three.js organises 3D around a few ideas:

• Scene — the world itself, holding every object, light, and background
• Camera — the viewpoint: perspective cameras (like a real camera, with depth) for most scenes, orthographic cameras for technical views
• Mesh — an object, made of geometry (its shape: box, sphere, custom model) plus material (its surface: colour, shininess, texture)
• Renderer — the piece that draws the scene through the camera onto the page, handling the WebGL details

A minimal scene follows the same pattern every time: create a scene, add a mesh, add a light, point a camera at it, and animate it in a loop — each frame slightly rotating the mesh, so it appears to move. That loop is the heartbeat of every Three.js app, from a spinning sneaker on a store page to a full browser game.

The honest trade

Three.js's trade is performance awareness: 3D in the browser is real graphics work, so large scenes need care — too many objects, unoptimised models, or per-frame allocations will stutter, especially on phones. And Three.js is a rendering library, not a game engine: physics, sound, and game logic come from other libraries or your own code. The rule of thumb: Three.js when the web page itself needs 3D — product configurators, visualisations, interactive demos; a dedicated engine or native app when the project is a full game with physics and complex state.

Takeaway

Three.js makes WebGL usable: scenes, cameras, and meshes instead of hundreds of lines of graphics code. It is why 3D on the web went from a curiosity to product pages, games, and visualisations you use every day.

Originally published at https://practicaldevblog.blogspot.com/2026/10/threejs-explained-3d-graphics-in-browser.html