bbdaii/three-pivot-controls

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.