git404hub

what is three-pivot-controls fr?

bbdaii/three-pivot-controls — explained in plain English

Analysis updated 2026-05-18

10TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

tl;dr

A framework-free JavaScript gizmo for Three.js that lets you drag to move, rotate, and resize 3D objects with mouse or touch.

vibe map

mindmap
  root((three-pivot-controls))
    What it does
      Draggable gizmo for 3D objects
      Translate rotate and scale handles
      Mouse and touch support
    Tech stack
      TypeScript
      Three.js
    Use cases
      3D editors and viewers
      Custom pivot points
      Works alongside orbit controls
    Audience
      Three.js developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Add draggable move, rotate, and resize handles to objects in a Three.js scene.

VIBE 2

Build a 3D editor or model viewer where users reposition objects by hand.

VIBE 3

Let users set a custom pivot point so rotation happens around an edge or corner.

VIBE 4

Combine with camera orbit controls by disabling orbiting while the gizmo is in use.

what's the stack?

TypeScriptThree.jsWebGL

how it stacks up fr

bbdaii/three-pivot-controlscodee-sh/payload-training-appfahmidme/agentcore-agui-starter
Stars101010
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderatehard
Complexity2/54/54/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

Requires an existing Three.js project as a peer dependency.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

in plain english

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.

prompts (copy fr)

prompt 1
Show me how to add three-pivot-controls to an existing Three.js scene with a single mesh.
prompt 2
Help me set up drag events so my UI updates when a user moves an object with the gizmo.
prompt 3
Explain how to configure the anchor option to rotate an object around one of its corners.
prompt 4
Walk me through disabling OrbitControls while the pivot gizmo is being dragged.

Frequently asked questions

what is three-pivot-controls fr?

A framework-free JavaScript gizmo for Three.js that lets you drag to move, rotate, and resize 3D objects with mouse or touch.

What language is three-pivot-controls written in?

Mainly TypeScript. The stack also includes TypeScript, Three.js, WebGL.

What license does three-pivot-controls use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is three-pivot-controls to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is three-pivot-controls for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.