Showroom · Make-of

How Plumbago was made

A fictional atelier presents one wooden HB pencil with total seriousness. The instrument is not a photograph or a model file — it is built from equations in your browser with three.js, lit by a single sunset sky, and it comes apart as you scroll so you can read it component by component. The joke is the sincerity; the craft is real.

What it demonstrates

That "product visualisation" doesn't need a purchased 3D asset — a familiar object, described precisely enough in geometry, out-renders a stock model because every millimetre is intentional. The barrel is a true hexagon that tapers into a real sharpening cone; the imprint is foil on one flat; the graphite is a metal-rough core, not a painted stripe. And it stays honest: the copy discloses the actual materials — graphite, kaolin, incense cedar, the famous absence of lead — with no claim the render can't back up.

Techniques, honestly named

• A milled hexagonal barrel — the outer surface is a radial grid whose radius is min(sharpening cone, hexagon); that single minimum is what carves the scalloped collar where the knife meets the six facets. Two cedar slats, a flat glue face and a half-round core groove make each half, exactly as a pencil is actually assembled.
• One sunset sky as the only light — a single equirectangular HDRI is PMREM-filtered into the scene environment; a neutral room environment lights the pencil until (or unless) the sky finishes loading. No lamps, no rigs — physically-based materials read the sky and that is the whole lighting recipe.
• Textures drawn on a canvas — the cedar grain and the foil imprint (PLUMBAGO · No 001 · HB) are painted to 2D canvases and uploaded as textures; the imprint is placed on the θ = 90° flat so it sits upright on one face and is redrawn once the web font arrives.
• Scroll as choreography, not scrubbing — scroll progress feeds piecewise smoothstep curves that pose the pencil, keyframe the camera through four stations (hero, tip macro, exploded, finish) and drive the explode offsets; a separate hand-rolled drag-orbit adds decaying yaw/pitch on top, weighted so it only counts in the hero.
• An exploded view with labels that track — at the assembly station the five parts slide apart and HTML labels are positioned each frame by projecting each part's world point to screen space, then clamped inside the viewport so nothing falls off a phone edge.
• Respectful fallbacks — reduced motion holds a lit, still pencil; a watchdog swaps to a line-drawing SVG and a document layout if WebGL never reports in; and a lost GPU context is caught and the sky environment rebuilt on restore, so a reclaimed context never leaves a dead white canvas.

Recreate it