enhance rotation controls

demo/index.html

@@ -92,6 +92,7 @@
       </div>
       <div style="opacity: 0.7">
         Snap: hold <b>Ctrl</b> / <b>Cmd</b> (or enable the snapping checkbox).<br />
+        Rotate: hold <b>Alt</b>/<b>Option</b> for finer movement and a two-decimal angle readout.<br />
         Scale: <b>Alt</b>/<b>Option</b> flips anchor, <b>Shift</b> = uniform + centered.
       </div>
     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voluma/three-transform-gizmo",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Custom three.js transform gizmo with per-axis/per-plane extrude scaling, combined mode, angle-sector rotation and themeable styling. Near drop-in replacement for TransformControls.",
   "keywords": [
     "three",

src/TransformGizmo.ts

@@ -52,6 +52,13 @@ interface DragState {
   parentScaleInv: Vector3
   rotationAxisWorld: Vector3
   sectorStartDir: Vector3
+  /** Raw and adjusted angles at the last Alt transition. */
+  rotationRawAnchor: number
+  rotationAngleAnchor: number
+  /** Last drag sample, used to change sensitivity without a jump. */
+  rotationLastRaw: number
+  rotationLastAngle: number
+  rotationFine: boolean
   localHalfExtents: Vector3
   localCenterOffset: Vector3
   handleDistanceWorld: number
@@ -1015,6 +1022,11 @@ export class TransformGizmo extends Object3D<GizmoEventMap & Object3DEventMap> {
       parentScaleInv: new Vector3(1 / parentScale.x, 1 / parentScale.y, 1 / parentScale.z),
       rotationAxisWorld,
       sectorStartDir: _v2.copy(startPoint).sub(worldPositionStart).projectOnPlane(plane.normal).normalize().clone(),
+      rotationRawAnchor: 0,
+      rotationAngleAnchor: 0,
+      rotationLastRaw: 0,
+      rotationLastAngle: 0,
+      rotationFine: this._altKey,
       localHalfExtents,
       localCenterOffset,
       handleDistanceWorld,
@@ -1137,6 +1149,18 @@ export class TransformGizmo extends Object3D<GizmoEventMap & Object3DEventMap> {
     return this.resolveSnap(this._rotationSnap, deg > 0 ? (deg * Math.PI) / 180 : 0)
   }
 
+  private adjustedRotationAngle(drag: DragState, raw: number): number {
+    if (drag.rotationFine !== this._altKey) {
+      drag.rotationRawAnchor = drag.rotationLastRaw
+      drag.rotationAngleAnchor = drag.rotationLastAngle
+      drag.rotationFine = this._altKey
+    }
+    const angle = drag.rotationAngleAnchor + (raw - drag.rotationRawAnchor) * (this._altKey ? 0.1 : 1)
+    drag.rotationLastRaw = raw
+    drag.rotationLastAngle = angle
+    return angle
+  }
+
   private activeScaleSnap(): number | null {
     return this.resolveSnap(this._scaleSnap, this._theme.snapping.temporaryScaleSnap)
   }
@@ -1209,7 +1233,7 @@ export class TransformGizmo extends Object3D<GizmoEventMap & Object3DEventMap> {
       const n = drag.rotationAxisWorld.copy(offset).cross(this._eye)
       if (n.lengthSq() < 1e-12) return
       n.normalize()
-      let angle = offset.dot(_v3.copy(n).cross(this._eye)) * speed
+      let angle = this.adjustedRotationAngle(drag, offset.dot(_v3.copy(n).cross(this._eye)) * speed)
       angle = snapAngle(angle, snap)
       _q1.setFromAxisAngle(n, angle)
       object.quaternion
@@ -1224,7 +1248,7 @@ export class TransformGizmo extends Object3D<GizmoEventMap & Object3DEventMap> {
     const v0 = _v2.copy(drag.startPoint).sub(drag.worldPositionStart).projectOnPlane(n)
     const v1 = _v3.copy(point).sub(drag.worldPositionStart).projectOnPlane(n)
     if (v0.lengthSq() < 1e-12 || v1.lengthSq() < 1e-12) return
-    let angle = Math.atan2(v0.clone().cross(v1).dot(n), v0.dot(v1))
+    let angle = this.adjustedRotationAngle(drag, Math.atan2(v0.clone().cross(v1).dot(n), v0.dot(v1)))
 
     // World X/Y/Z: snap absolute twist around the axis (preserves swing).
     // Local X/Y/Z and screen E: snap the angular delta from drag start.
@@ -1251,7 +1275,7 @@ export class TransformGizmo extends Object3D<GizmoEventMap & Object3DEventMap> {
     // re-orient every move: in local space the gizmo root rotates with the
     // object, so a one-shot orientation at pointerdown would drift
     this.orientSector()
-    this._sector.update(angle)
+    this._sector.update(angle, this._altKey)
   }
 
   private applyScale(drag: DragState, point: Vector3): void {

src/gizmos/AngleSector.ts

@@ -49,7 +49,7 @@ export class AngleSector extends Mesh<BufferGeometry, MeshBasicMaterial> {
   }
 
   /** angle in radians, signed; visual clamped to +-2PI */
-  update(angle: number): void {
+  update(angle: number, fine = false): void {
     const a = Math.max(-Math.PI * 2, Math.min(Math.PI * 2, angle))
     const segments = Math.max(1, Math.min(MAX_SEGMENTS, Math.ceil((Math.abs(a) / (Math.PI * 2)) * MAX_SEGMENTS)))
     const attr = this.geometry.getAttribute('position') as BufferAttribute
@@ -75,9 +75,9 @@ export class AngleSector extends Mesh<BufferGeometry, MeshBasicMaterial> {
     if (this.showLabel) {
       // degrees readout on the sector's bisector (full-circle degrees, signed)
       const deg = (angle * 180) / Math.PI
-      let text = deg.toFixed(1)
-      if (text.endsWith('.0')) text = text.slice(0, -2)
-      if (text === '-0') text = '0'
+      let text = deg.toFixed(fine ? 2 : 1)
+      if (!fine && text.endsWith('.0')) text = text.slice(0, -2)
+      if (Number(text) === 0) text = fine ? '0.00' : '0'
       this.label.setText(`${text}°`)
       const mid = a / 2
       this.label.position.set(Math.cos(mid) * r * LABEL_RADIUS, Math.sin(mid) * r * LABEL_RADIUS, 0)