Three.js Scroll Seasons Tree — Keyframe Color Grading

The Three.js Scroll Four Seasons Tree snippet plants a low-poly tree on a hillside disc and lets one scroll carry it through an entire year — spring blossoms drifting past green buds, deep summer foliage, orange autumn leaf-fall, bare branches under snow, and back to spring — while the camera circles the tree a half-turn. The engine underneath is a compact keyframe system: five season states, one scrubbed year value, and everything on screen lerped between adjacent keyframes.

Seasons as data: the keyframe table

Every visual property that changes across the year lives in one array of keyframe objects: sky color, ground color, foliage color, light color and intensity, foliage scale, particle color, and particle opacity, plus a HUD name and accent. The frame loop computes which pair of keyframes the year progress falls between (seg = p × 4), and lerps every property by the fractional part. Adding a fifth visual property to the year means adding one field to five objects — no animation code changes. The fifth keyframe duplicates spring, so the year closes its loop and the scroll's end matches its beginning, a cyclical structure unlike the linear arcs of the ocean dive or planet approach.

Smoothstep holds each season at its center

Raw linear blending would keep the scene perpetually in transition — always between seasons, never *in* one. Passing the blend fraction through smoothstep (f²(3 − 2f)) flattens the curve near 0 and 1, so each season visibly holds near its keyframe before easing into the next. One line converts a continuous color wash into four distinct acts with transitions.

Winter is a scale, not a texture swap

The foliage is 90 icosahedron puffs distributed through the crown by a cube-root radial distribution (which fills a sphere evenly instead of clustering at the center). Their season behavior is driven by two lerped values: color (bud green → deep green → orange → snowy white) and scale — and winter's scale keyframe is 0.12, which shrinks the puffs to almost nothing and reveals the branch skeleton underneath. Shrinking beats hiding: the tree visibly *loses* its leaves through late autumn and buds them back through early spring, both directions handled by the same lerp. Each puff also breathes ±3% on clock time with a per-puff phase, so the crown rustles while scroll is idle.

One particle system plays three roles

Pink blossom petals in spring, orange falling leaves in autumn, white snow in winter — all the same 400-point recycled system. The keyframes drive its color and opacity (summer sets opacity 0, turning it off entirely), while per-particle seeds vary fall speed and sway. Points wrap from ground back to the sky, the recycle pattern this series uses everywhere from starfield warp onward. One system, three seasonal meanings, zero allocation.

A half-orbit that pairs with the year

The camera circles the tree just over half a turn across the scroll, so each season also gets its own viewing angle — and because sun color and intensity are keyframed too, the same geometry reads warm and lush in summer light and cold and skeletal under the dim winter sun. The HUD swaps the season name and its accent color at each blend midpoint. Scrolling backwards runs the year in reverse, snow lifting off and leaves reattaching, since every property derives from the single scrubbed value — the same guarantee behind the tornado vortex's dispersal.