Three.js Scroll 3D Book — Bending Page Flip Snippet

The Three.js Scroll 3D Book Page Flip snippet lays an open book on a desk and lets scroll turn its twelve pages one by one — each page arcing over the spine with a genuine mid-flip paper bend, printed text lines riding along, and the right-hand stack visibly transferring to the left as reading progresses. GSAP's ScrollTrigger scrubs one progress value; overlapping per-page windows and a vertex-bend pass do the rest.

The hinge is a geometry translation

A page must rotate about the book's spine, not its own center. Rather than wrapping each page in a pivot Group, the snippet translates the PlaneGeometry itself — geo.translate(PW/2, 0, 0) — so the page's left edge sits at its local origin. After that, plain rotation.z *is* the page turn: 0 lies flat right, −π lies flat left. This one-line trick eliminates a whole layer of pivot objects and is worth stealing for any hinged element: doors, lids, cards, lever arms.

Paper bends with a half-sine, not physics

Rigid rotating planes look like plastic sheets. Real paper lifts in an arc — the free edge lags, the middle bows. Each page's geometry has 20 width segments, and every frame its vertices are displaced in local Y by sin(x/PW × π) × bend, a half-sine that is zero at the hinge and free edge and maximal mid-page. The bend amplitude itself is sin(flipProgress × π) × 1.15 — zero when the page rests on either side, peaking mid-flip. Vertices are restored from a pristine slice() copy of the flat geometry each frame, the same base-copy pattern as the ocean dive surface, so bends never accumulate. computeVertexNormals() after displacement keeps lighting on the curved paper correct.

Overlapping flip windows read as leafing

Sequential page turns — each finishing before the next lifts — feel mechanical. The window arithmetic gives page i a slice starting at i × win × 0.65, so each new page lifts when its predecessor is 65% through its arc. Two or three pages are airborne at busy moments, the way a reader leafs through a book. It is the same derived-stagger technique as the voxel build, tuned by a single overlap constant.

Stack transfer and printed text for free

Unflipped pages stack on the right with each successive page 0.012 lower; the moment a page's flip completes, its rest height switches to the mirrored left-stack order (PAGES − i) × −0.012. The right pile visibly thins while the left thickens — a small state change that sells the passage of reading. The printed lines are thin dark boxes added as *children* of each page mesh, so they rotate and translate with the page automatically through scene-graph parenting (they float 0.012 above the surface rather than re-bending — invisible at reading distance). Line widths vary by a deterministic modulo so paragraphs look ragged-right, like real typesetting.

A reading camera, a HUD that counts

The camera hovers at an overhead reading angle, drifting a half-radian across the scroll with a slight descent — enough parallax to feel present at the desk without upstaging the pages, plus the series-standard clock bob for idle life. The HUD counts pages whose flip has completed, so PAGE 7 / 12 always matches what the stacks show. Scrolling backwards un-turns pages in exact reverse order, bends included. For 2D scroll storytelling with the same "chapters" energy, compare the scroll pin story and scroll before/after snippets.