flexy — Duditeria

What it does

Give it any Three.js geometry and a curve, and it bends the geometry to flow along that curve, keeping its cross-section intact.

The scene above

The lamp's arm is a plain, straight cylinder. Every frame, its original vertices are restored and flexy.bend() wraps them along a curve. When you drag, your stroke becomes that curve: it gets smoothed, turned into a spline, and the arm is re-bent live while you draw. The shade is oriented along the direction of the curve's last stretch, so it always points where the arm is heading.

How it works

Each vertex's position along the geometry's long axis is mapped to a parameter t on the curve. flexy samples the curve's position and tangent at t, rotates the vertex's cross-section into the curve's local frame and writes the result back into the buffer. The deformation is smooth and continuous, with no pinching.

fitStretch or compress the geometry to cover the whole curve.

preserveKeep the original length and centre it on the curve.

tileRepeat the geometry along the curve when it's shorter than the arc.

Usage

import * as flexy from 'flexy-bend';

flexy.bend({
  THREE,
  curve,                       // any THREE.Curve
  bufferGeometry: mesh.geometry,
  axis: 'y',                   // the geometry's long axis
  orientation: new THREE.Vector3(0, 0, 1),
  mode: 'fit',
});

Where you'd use it

Cables, pipes, roads or rivers that follow a spline without manual rigging
Procedural plants and vines that grow along a path
Bending tails, tentacles or limbs along an animated curve
Any mesh that needs to change shape in response to a moving path