Three.js Wave Ribbon — Flowing 3D TubeGeometry Animation

The Three.js Wave Ribbon snippet renders a flattened, glossy ribbon that undulates continuously along its length — the wave visibly traveling from one end to the other rather than the whole shape bobbing in place — by animating the control points of a CatmullRomCurve3 and rebuilding a TubeGeometry from it every frame, using core Three.js loaded from a CDN.

A curve, not a mesh, is the thing being animated

Rather than displacing vertices on a flat plane mesh directly (the technique used in the particle wave and synthwave terrain snippets), this ribbon's actual shape comes from a THREE.CatmullRomCurve3 — a smooth curve interpolated through a small number of control points. TubeGeometry then extrudes a circular cross-section along that curve's entire length, producing the tube-like mesh you actually see. Animating the curve's handful of control points, rather than hundreds of individual mesh vertices, is a far simpler mental model for anything shaped like a rope, cable, or ribbon.

Flattening a round tube into a ribbon with one line

TubeGeometry only supports a circular cross-section natively — there's no built-in "flat ribbon" option. This snippet sidesteps that limitation with one extra line: geometry.scale(1, 0.12, 1), squashing the finished tube geometry down on one axis after it's built. A circular tube squashed to roughly an eighth of its height reads convincingly as a flat ribbon rather than a rounded cable, without needing any custom cross-sectional geometry.

Why the geometry is rebuilt, not mutated in place

Every other snippet in this collection that animates a shape (the particle wave, the morphing blob) mutates an existing BufferGeometry's attributes directly rather than recreating it. TubeGeometry is the exception, and for a specific reason: its triangulated surface depends on the curve's *tangent direction* at every sampled point along its length, which changes in a complex way whenever any control point moves. Recomputing that correctly requires re-running TubeGeometry's own construction logic — which is exactly what calling new THREE.TubeGeometry(curve, ...) again does, followed by disposing the old geometry to free its GPU memory before replacing it.

Phase-per-index is what makes the wave travel

Every control point's Y and Z position is driven by a sine and cosine wave, but each point's phase offset is index * 0.55 — so point 0 and point 10 are always at different points in the wave cycle at any given moment. This staggered phase, growing steadily along the ribbon's points, is what makes the undulation visibly *travel* from one end toward the other, rather than every point moving up and down in unison, which would look like the whole ribbon breathing rather than flowing.

Two lights, two colors, for depth

A blue point light and a pink point light, positioned on opposite sides of the scene, give the glossy MeshStandardMaterial two distinct highlight colors to catch as the ribbon twists — a detail that reads as more dimensional than a single light source would, especially combined with side: THREE.DoubleSide so the ribbon's underside is visible and lit correctly whenever the curve twists it into view.

Where this technique applies

Animated-curve-plus-TubeGeometry is the standard approach for any rope, cable, snake, or flowing-fabric effect in Three.js. Pair this ribbon with a scroll camera path flythrough for a decorative flowing element woven through a scroll sequence, or contrast its smooth, continuous flow against the discrete, segmented look of the DNA helix.