Hello! I wanted to share three-pivot-controls, a drag gizmo I built for translating, rotating, and scaling objects in vanilla Three.js.
drei’s PivotControls is a great tool if you’re on React Three Fiber, but there wasn’t really an equivalent for plain Three.js — just the bare TransformControls that ships with the library. So I built a framework-free version: translate arrows, rotate rings, and scale handles all render at once (no mode switching), and it works with mouse and touch out of the box (Pointer Events).
A few things I put extra effort into:
- a real anchor point option — scale/rotate around any point on the object’s bounding box (e.g. scale from the floor instead of the object’s center), with proper position compensation
- fully runtime-customizable: axis colors, handle thickness/radius, reach from the pivot, partial rotate arcs
- ~5KB gzipped, three as the only peer dependency
Demo: three-pivot-controls demo
GitHub: GitHub - bbdaii/three-pivot-controls · GitHub
npm: npm install three-pivot-controls three
MIT licensed. Bug reports, feature suggestions, and other contributions welcome — let me know if you run into anything!
