English for Three.js Developers
Vocabulary for developers building 3D graphics with Three.js — scenes, meshes, geometries, materials, cameras, and draw calls — for teams discussing WebGL rendering in English.
Three.js is a JavaScript library that wraps WebGL’s low-level API into a scene graph you can actually reason about — objects, lights, and cameras instead of raw buffers and shader boilerplate. Its vocabulary borrows heavily from computer graphics and game engines, so a lot of the terms will be unfamiliar even to experienced web developers. If your team builds 3D visualizations, product configurators, or WebGL experiences, here’s the English you’ll need for rendering discussions and performance reviews.
The Scene Graph
Scene — the root container that holds every object, light, and helper you want rendered; nothing shows up on screen unless it’s added to the scene. “The model loads fine but never appears — check whether it was actually added to the scene, or if it’s just sitting in memory unattached.”
Mesh — the combination of a geometry (shape) and a material (appearance) that Three.js actually renders; the fundamental visible unit in a scene.
“We’re instantiating a new mesh per particle, which is way too expensive — switch to InstancedMesh so the GPU can draw them all in one call.”
Scene graph — the hierarchical tree of objects, where each child inherits the transform (position, rotation, scale) of its parent. “Parent the wheel meshes to the car’s body object — that way the whole scene graph rotates together instead of us updating four transforms by hand.”
Geometry and Material
Geometry
A geometry defines the shape of an object — the raw vertex positions, normals, and UV coordinates, with no information about color or texture.
“The geometry is fine; the issue is on the material side — the normals look inverted, so lighting is being calculated backward.”
Material
A material defines how a geometry’s surface reacts to light — color, roughness, metalness, and which shader it uses under the hood.
“Swapping from
MeshBasicMaterialtoMeshStandardMaterialfixed the flat, unlit look — now it actually responds to the scene’s lighting.”
UV mapping
UV mapping is how a 2D texture image is wrapped onto a 3D geometry’s surface.
“The texture looks stretched on the sphere’s poles — that’s a UV mapping issue, not a texture resolution problem.”
Camera and Renderer
Camera — the object that defines the viewpoint and projection (perspective or orthographic) used to render the scene to a 2D image.
“We’re using a perspective camera for the product viewer but an orthographic one for the technical blueprint mode — the distortion-free look really matters there.”
Renderer — the object (usually WebGLRenderer) responsible for taking the scene and camera and actually drawing pixels to the canvas each frame.
“The renderer is set to the wrong pixel ratio on high-DPI screens — that’s why the edges look blurry on retina displays.”
Frustum — the pyramid-shaped volume representing everything the camera can currently see; objects outside it don’t need to be drawn.
“We added frustum culling so objects behind the camera or far off-screen skip the draw call entirely — that alone cut our frame time in half.”
Performance Vocabulary
Draw call — a single instruction sent to the GPU to render a batch of geometry; too many draw calls per frame is a common performance bottleneck.
“We went from 4,000 draw calls to about 200 by merging static geometries — the frame rate on mobile finally became usable.”
Shader uniform — a value passed from JavaScript into a shader program that stays constant across all vertices/pixels for a given draw call, like a color or time value.
“The pulsing glow effect is driven entirely by a
timeuniform we update every frame — no per-vertex animation logic needed.”
LOD (Level of Detail) — swapping a high-poly model for a simpler one as it moves farther from the camera, to save rendering cost.
“We added an LOD chain for the terrain — full detail up close, a decimated mesh past 50 meters. Distant hills don’t need 10,000 triangles.”
Common Mistakes
| Mistake | Correction |
|---|---|
| Calling any 3D object a “mesh” | Only geometry + material combos rendered as surfaces are meshes — lights and cameras are objects, not meshes. |
| Saying “the model is lagging” | Be specific: is it a draw call bottleneck, a shader compile stall, or a CPU-side animation loop issue? |
| Confusing “geometry” with “material” | Geometry is shape; material is appearance. A wireframe bug is usually a geometry issue, not a material one. |
| Treating frustum culling as automatic for everything | Three.js culls per-object by default, but custom shaders or instanced meshes sometimes need it handled manually. |
Practice Exercise
- Explain, in two sentences, the difference between geometry and material to someone new to 3D graphics.
- Write a short PR description for replacing individually rendered particle meshes with
InstancedMeshto reduce draw calls. - Draft a message to a designer explaining why a texture looks stretched on a curved surface (UV mapping), without using the word “bug.”