Three.jsGSAPScrollTriggerTypeScript
Керування
- Scroll to move through the story: toothache, inside the tooth, decay, filling, extraction, gap, scan, implant, healing, crown
- The dots on the right jump to any chapter (desktop)
- At the end, pick a day and a time and book; the booking is a demo and sends nothing
Needs WebGL. Without it, or if the graphics context is lost, the poster is shown. Respects the reduced-motion setting: camera cuts between chapters, no pain pulse or scan sweep. An educational demo for a fictional clinic, not medical advice; facts are general and sourced on the page.
Як це зроблено
The Tooth is a scroll story for a fictional dental clinic, built in plain Three.js with GSAP ScrollTrigger driving one progress value.
- One pure function (
story.ts, unit-tested) maps scroll progress to every scene value: camera pose, section cut, decay depth, filling, extraction, neighbour tilt, bone loss, scan, implant, healing and crown. The page only scrubs that one number. - The cross-section is real geometry, not a texture: the molar is built from layered meshes (enamel shell, dentin core with roots, pulp chamber with canals) and cut by a clipping plane. A small shader patch fills each layer's back faces with a flat section colour, so the cut reads as solid enamel, dentin and pulp rings without any capping geometry.
- The crown with four cusps and a central fissure is a sphere reshaped in code; the implant has a modelled helical thread (a tube along a helix) on a lathed body, with titanium lit by a generated room environment.
- The cut faces are unlit and carry procedural tissue patterns sampled where the view ray meets the cut plane: enamel rods, dentin tubules, pulp vessels and nerve, spongy bone with a cortical rim, the ligament and lamina dura around the roots, and an abscess at the root tip.
- Decay is painted on the cut face as fissure caries: a narrow cone through enamel that spreads along the dentin junction towards the pulp, with a chalky halo, softened dentin and a cavitated hole; the crown surface shows the stained pit. The filling is a prepared composite box; the curing light is a handpiece with a bent light guide and an orange shield.
- The loop draws only when something changes, except while the pain pulse, scan sweep or healing glow are on; it pauses off-screen and in hidden tabs.
- Reduced motion: camera cuts per chapter, no pulse, no sweep. Lost WebGL context: the poster is shown.
- The text is real HTML over the canvas, and the facts are general and linked to NHS and ADA pages; the booking at the end is a demo that sends nothing.