bbdaii/three-pivot-controls — explained in plain English
Analysis updated 2026-05-18
Add draggable move, rotate, and resize handles to objects in a Three.js scene.
Build a 3D editor or model viewer where users reposition objects by hand.
Let users set a custom pivot point so rotation happens around an edge or corner.
Combine with camera orbit controls by disabling orbiting while the gizmo is in use.
| bbdaii/three-pivot-controls | codee-sh/payload-training-app | fahmidme/agentcore-agui-starter | |
|---|---|---|---|
| Stars | 10 | 10 | 10 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | easy | moderate | hard |
| Complexity | 2/5 | 4/5 | 4/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Requires an existing Three.js project as a peer dependency.
three-pivot-controls is a small JavaScript library that adds a draggable control handle, often called a gizmo, to 3D scenes built with Three.js, a popular tool for rendering 3D graphics in a web browser. The gizmo shows translate arrows, rotate rings, and scale handles all at the same time, arranged in circles around each other so you never need to switch between modes. It works with both mouse and touch input right away. It was inspired by a similar control found in a React based Three.js library, but this version does not require React or any other framework, so it can be dropped into any plain Three.js project. Installing it is a single command, and attaching it to an object in your scene only takes a few lines of code: create the control, add its visual helper to your scene, attach it to the object you want to manipulate, and call an update function on every animation frame. The library gives you fine control over how the gizmo looks and behaves. You can choose to only show translate, rotate, or scale handles, decide whether the axes follow the object's own orientation or stay aligned to the world, change colors, adjust handle size and thickness, and set a custom pivot point so rotation and scaling happen around a specific corner or edge instead of the object's center. It can also show a floating label with live numbers, like distance moved or degrees rotated, while you drag. The control fires events when dragging starts, continues, and ends, so your code can react, for example to disable a camera orbiting control while the gizmo is being used so the two do not compete for mouse input. It handles nested and rotated parent objects correctly when calculating movement, and cleans up its own event listeners when you are done with it. The project is written in TypeScript, has a working browser demo, and is released under the MIT license, which allows free use, including in commercial projects, as long as the license text stays with the code.
A framework-free JavaScript gizmo for Three.js that lets you drag to move, rotate, and resize 3D objects with mouse or touch.
Mainly TypeScript. The stack also includes TypeScript, Three.js, WebGL.
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
double-check against the repo, no cap.