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