There is a particular kind of web tutorial that introduces Three.js, WebGL, and npm as if they were three peers, then proceeds to use all three without ever explaining what role each is playing. They are not peers. WebGL is a low-level graphics API the browser exposes. Three.js is a library that wraps WebGL into something humans actually want to write. npm is how you install Three.js. The relationship is “WebGL is the GPU. Three.js is the steering wheel. npm is the car dealership.” Once you have that picture, the rest of the web-3D landscape stops looking like a hall of mirrors.
This monograph is the plain-English version, written for the developer who can write JavaScript and has been meaning to learn 3D but keeps bouncing off tutorials that assume too much. The headline figure is a rotating wireframe cube that you can poke — its speed and rotation rate are sliders in the page — and the math behind it is the math WebGL is running on your GPU as you read this.
What it covers
About eighteen minutes of reading, plus whatever time you spend playing with the demos.
§ 1 — The three things, in one breath. WebGL = the API, Three.js = the library, npm = the package manager. The relationship in one sentence each.
§ 2 — WebGL, in plain words. What the GPU actually does. Vertex shaders, fragment shaders, the rasterization pipeline. Why “raw WebGL” is famously painful (it isn’t bad — it’s just the wrong abstraction for application code).
§ 3 — Three.js, in plain words. What the library actually gives you. Scene, camera, renderer, mesh, material, light. The minimum-viable Three.js scene in thirty lines.
§ 4 — npm, the third leg. How packages get into your project. npm install three. Why this is the easiest of the three to use and the easiest of the three to mess up. Cross-reference to the Node.js & npm post for the deeper treatment.
§ 5 — The worked example: a rotating cube. Step by step. The HTML page. The npm install. The scene-camera-renderer setup. The animation loop. The cube. The lights. The orbit controls. About 60 lines of code from empty folder to working interactive 3D scene.
§ 6 — Shaders, briefly. What you’d write if you decided to leave Three.js and use WebGL directly. The vertex shader. The fragment shader. The GLSL language. When this is worth doing and when it isn’t.
§ 7 — Performance notes. The handful of mistakes that tank a 3D web app. Recreating geometries every frame. Loading uncompressed textures. Forgetting to dispose of resources. The four-rule discipline that catches most of it.
§ 8 — The wider ecosystem. What lives around Three.js. react-three-fiber for React users. Babylon.js as the leading alternative library. WebGPU as the next-generation API replacing WebGL.
§ 9 — Further reading. The Three.js docs, the WebGL fundamentals tutorials, and the handful of YouTube creators who teach this well.
Read it
The monograph lives at its own URL with a warm-paper layout — burnt-orange Three.js accent, crimson npm accent, an interactive rotating cube in the hero that you can speed up and slow down.
← Back to Autonomy