← Projects flexy / bend geometry along curves

flexy

bend geometry along curves

scroll ↓

How it works

You hand it a BufferGeometry and a CubicBezierCurve3, and it deforms the geometry so it flows along that curve — preserving the cross-sectional shape and orientation at every point.

Under the hood it maps each vertex's position along the geometry's elongation axis to a parameter t on the curve, samples the tangent there, rotates the vertex's perpendicular component to match the curve's local frame, and writes the final world position back into the buffer. The result is a smooth, continuous deformation with no pinching or self-intersection.

Three modes control how the geometry's length relates to the curve's arc length: fit stretches or compresses it to fill the curve exactly, preserve keeps the original scale and centers it on the curve, and tile repeats the geometry if it's shorter than the arc.

The scene above

A sansevieria plant rendered entirely with flexy.bend(). Each leaf is a tapered quad-strip geometry bent along a live Bezier curve — the curve's endpoint tracks the orbiting sun in real time, so the leaves follow the light as it sweeps across the sky.

Every frame the original vertex positions are restored from a backup, a new curve is computed from the leaf root toward the current sun direction, and flexy.bend() rewrites the buffer in place. Eight leaves, eight curves, updating every third frame.

Where you'd use it

  • Organic plant or vine growth animations where shapes follow a procedural path
  • Roads, rivers, or cables that need to conform to a spline without manual rigging
  • Procedural character animation — bending limbs or tails along Bezier arcs
  • Any geometry that needs to morph its shape in response to a changing curve