Three.js Demos
Three.js Demos

Curve Modifier Playground (r183 roadmap)

Flow-based geometry deformation demo that moves and bends a mesh along an editable Catmull-Rom spline path in real time.

Key topics: three.js curve modifier, flow, spline deformation, catmullromcurve3, r183

What this code does

- CurveModifier Flow: uses `Flow` from `examples/jsm/modifiers/CurveModifier.js` to deform and move geometry along a curve.
- Editable Spline Inputs: GUI controls modify spline bend, arc height, center height, and tension at runtime.
- Live Curve Rebuild: each control change regenerates sampled path geometry and updates flow deformation instantly.
- Orientation Control: roll parameter rotates the deformed object around its tangent direction for alignment testing.
- Path Debugging: optional spline line and control-point markers help verify shape continuity and curve tuning.
- Practical Use: useful for conveyor props, tracks, tentacle-like motion, and stylized path-following behaviors.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
import { Flow } from 'three/examples/jsm/modifiers/CurveModifier.js'

const mesh = new THREE.Mesh(
  new THREE.TorusKnotGeometry(0.45, 0.14, 120, 22),
  new THREE.MeshStandardMaterial({ color: 0x8ab0ff, metalness: 0.2, roughness: 0.3 })
)
const flow = new Flow(mesh)

const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-4, 1, -2),
  new THREE.Vector3(-1, 2, 3),
  new THREE.Vector3(2, 1, -3),
  new THREE.Vector3(4, 2, 2)
], true)

flow.updateCurve(0, curve)
scene.add(flow.object3D)

// Animate the object along the deformed path.
flow.moveAlongCurve(0.002)
← Back