uniform axis scale handles to align better with the drei scale controls and have a better ux

Author: bbohlender

examples/handle-vanilla/index.ts

@@ -1,24 +1,6 @@
-import {
-  BoxGeometry,
-  Group,
-  Mesh,
-  MeshBasicMaterial,
-  Object3D,
-  Object3DEventMap,
-  PerspectiveCamera,
-  Scene,
-  Vector3,
-  WebGLRenderer,
-} from 'three'
+import { BoxGeometry, Mesh, MeshBasicMaterial, Object3DEventMap, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
 import { PointerEventsMap, forwardHtmlEvents } from '@pmndrs/pointer-events'
-import {
-  OrbitHandles,
-  PivotHandles,
-  RotateHandles,
-  TransformHandles,
-  TranslateHandles,
-  HandleStore,
-} from '@pmndrs/handle'
+import { OrbitHandles, PivotHandles, TransformHandles, HandleStore } from '@pmndrs/handle'
 import { createXRStore } from '@pmndrs/xr'
 
 const camera = new PerspectiveCamera(70, 1, 0.01, 100)
@@ -40,7 +22,7 @@ const transform = new TransformHandles()
 transform.rotation.y = Math.PI / 4
 transform.position.z = -2
 scene.add(transform)
-transform.bind('translate')
+transform.bind('scale')
 transform.space = 'local'
 
 const box2 = new Mesh<BoxGeometry, MeshBasicMaterial, Object3DEventMap & PointerEventsMap>(

packages/handle/src/computations/utils.ts

@@ -79,7 +79,9 @@ export function computeHandleTransformState(
   }
 
   //compute scale
-  applyTransformOptionsToVector(scale, storeData.initialTargetScale, options.scale ?? true)
+  if (typeof options.scale != 'object' || !options.scale.uniform) {
+    applyTransformOptionsToVector(scale, storeData.initialTargetScale, options.scale ?? true)
+  }
 
   return {
     pointerAmount,

packages/handle/src/handles/registered.ts

@@ -5,7 +5,7 @@ import { extractHandleTransformOptions } from './utils.js'
 
 export class RegisteredHandle extends Group {
   public readonly store: HandleStore<unknown>
-  public options: Exclude<ReturnType<typeof extractHandleTransformOptions>, false> | undefined
+  protected options: Exclude<ReturnType<typeof extractHandleTransformOptions>, false> | undefined
   protected readonly tag: string
 
   constructor(

packages/handle/src/handles/scale/axis.ts

@@ -78,7 +78,7 @@ export class AxisScaleHandle extends RegisteredHandle {
     interactionGroup.position.x = this.invert ? -0.3 : 0.3
     this.add(interactionGroup)
 
-    const interactionMesh = new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4))
+    const interactionMesh = new Mesh(new CylinderGeometry(0.2, 0, 0.5, 4))
     interactionMesh.pointerEventsOrder = Infinity
     interactionMesh.position.y = 0.04
     interactionGroup.add(interactionMesh)
@@ -93,7 +93,6 @@ export class AxisScaleHandle extends RegisteredHandle {
       unregister()
       cleanupHeadHover?.()
       cleanupLineHover?.()
-      this.remove(visualizationHeadMesh)
       if (visualizationLineGroup != null) {
         this.remove(visualizationLineGroup)
       }

packages/handle/src/handles/scale/index.ts

@@ -5,11 +5,18 @@ import { computeHandlesScale } from '../utils.js'
 import { FreeScaleHandle } from './free.js'
 import { AxisScaleHandle } from './axis.js'
 import { PlaneScaleHandle } from './plane.js'
+import { UniformAxisScaleHandle } from './uniform.js'
 
 const vectorHelper = new Vector3()
 
 export class ScaleHandles extends Group {
-  private readonly free: FreeScaleHandle
+  private readonly scaleX: UniformAxisScaleHandle
+  private readonly scaleY: UniformAxisScaleHandle
+  private readonly scaleZ: UniformAxisScaleHandle
+  private readonly scaleNegX: UniformAxisScaleHandle
+  private readonly scaleNegY: UniformAxisScaleHandle
+  private readonly scaleNegZ: UniformAxisScaleHandle
+
   private readonly translationX: AxisScaleHandle
   private readonly translationY: AxisScaleHandle
   private readonly translationZ: AxisScaleHandle
@@ -26,8 +33,22 @@ export class ScaleHandles extends Group {
     public fixed?: boolean,
   ) {
     super()
-    this.free = new FreeScaleHandle(this.context)
-    this.add(this.free)
+    this.scaleX = new UniformAxisScaleHandle(this.context, undefined, 'x')
+    this.add(this.scaleX)
+    this.scaleY = new UniformAxisScaleHandle(this.context, undefined, 'y')
+    this.scaleY.rotation.z = Math.PI / 2
+    this.add(this.scaleY)
+    this.scaleZ = new UniformAxisScaleHandle(this.context, undefined, 'z')
+    this.scaleZ.rotation.y = -Math.PI / 2
+    this.add(this.scaleZ)
+    this.scaleNegX = new UniformAxisScaleHandle(this.context, undefined, 'x', true)
+    this.add(this.scaleNegX)
+    this.scaleNegY = new UniformAxisScaleHandle(this.context, undefined, 'y', true)
+    this.scaleNegY.rotation.z = Math.PI / 2
+    this.add(this.scaleNegY)
+    this.scaleNegZ = new UniformAxisScaleHandle(this.context, undefined, 'z', true)
+    this.scaleNegZ.rotation.y = -Math.PI / 2
+    this.add(this.scaleNegZ)
     this.translationX = new AxisScaleHandle(this.context, 'x')
     this.add(this.translationX)
     this.translationY = new AxisScaleHandle(this.context, 'y')
@@ -66,6 +87,13 @@ export class ScaleHandles extends Group {
   }
 
   bind(options?: HandlesProperties) {
+    const unbindScaleX = this.scaleX.bind(0xffffff, 0xffff00, options)
+    const unbindScaleY = this.scaleY.bind(0xffffff, 0xffff00, options)
+    const unbindScaleZ = this.scaleZ.bind(0xffffff, 0xffff00, options)
+    const unbindScaleNegX = this.scaleNegX.bind(0xffffff, 0xffff00, options)
+    const unbindScaleNegY = this.scaleNegY.bind(0xffffff, 0xffff00, options)
+    const unbindScaleNegZ = this.scaleNegZ.bind(0xffffff, 0xffff00, options)
+
     const unbindTranslationX = this.translationX.bind(0xff0000, 0xffff00, options)
     const unbindTranslationY = this.translationY.bind(0x00ff00, 0xffff00, options)
     const unbindTranslationZ = this.translationZ.bind(0x0000ff, 0xffff00, options)
@@ -75,7 +103,6 @@ export class ScaleHandles extends Group {
     const unbindTranslationXY = this.translationXY.bind(0x0000ff, 0xffff00, options)
     const unbindTranslationYZ = this.translationYZ.bind(0xff0000, 0xffff00, options)
     const unbindTranslationXZ = this.translationXZ.bind(0x00ff00, 0xffff00, options)
-    const unbindFree = this.free.bind(options)
 
     return () => {
       unbindTranslationX?.()
@@ -87,7 +114,12 @@ export class ScaleHandles extends Group {
       unbindTranslationXY?.()
       unbindTranslationYZ?.()
       unbindTranslationXZ?.()
-      unbindFree?.()
+      unbindScaleX?.()
+      unbindScaleY?.()
+      unbindScaleZ?.()
+      unbindScaleNegX?.()
+      unbindScaleNegY?.()
+      unbindScaleNegZ?.()
     }
   }
 }

packages/handle/src/handles/scale/uniform.ts

@@ -0,0 +1,72 @@
+import { BoxGeometry, ColorRepresentation, CylinderGeometry, Euler, Group, Mesh, MeshBasicMaterial } from 'three'
+import { RegisteredHandle } from '../registered.js'
+import { HandlesContext } from '../context.js'
+import { HandlesProperties } from '../index.js'
+import { handleXRayMaterialProperties, setupHandlesContextHoverMaterial } from '../material.js'
+import { extractHandleTransformOptions } from '../utils.js'
+import { Axis } from '../../state.js'
+
+const normalRotation = new Euler(0, 0, -Math.PI / 2)
+const invertedRotation = new Euler(0, 0, Math.PI / 2)
+
+export class UniformAxisScaleHandle extends RegisteredHandle {
+  constructor(
+    context: HandlesContext,
+    tagPrefix: string = '',
+    private readonly actualAxis: Axis,
+    private readonly invert: boolean = false,
+  ) {
+    super(context, 'xyz', tagPrefix, () => ({
+      scale: { uniform: true, ...this.options },
+      rotate: false,
+      translate: 'as-scale',
+      multitouch: false,
+    }))
+  }
+
+  bind(defaultColor: ColorRepresentation, defaultHoverColor: ColorRepresentation, config?: HandlesProperties) {
+    const options = extractHandleTransformOptions(this.actualAxis, config)
+    if (options === false) {
+      return undefined
+    }
+    this.options = options
+    const rotation = this.invert ? invertedRotation : normalRotation
+
+    //visualization
+    const headGroup = new Group()
+    headGroup.position.x = this.invert ? -0.7 : 0.7
+    headGroup.rotation.copy(rotation)
+    this.add(headGroup)
+
+    const material = new MeshBasicMaterial(handleXRayMaterialProperties)
+    const cleanupHeadHover = setupHandlesContextHoverMaterial(this.context, material, this.tag, {
+      color: defaultColor,
+      hoverColor: defaultHoverColor,
+      opacity: 0.5,
+      hoverOpacity: 1,
+    })
+
+    const visualizationHeadMesh = new Mesh(new BoxGeometry(0.08, 0.08, 0.08), material)
+    visualizationHeadMesh.renderOrder = Infinity
+    visualizationHeadMesh.rotation.copy(rotation)
+
+    headGroup.add(visualizationHeadMesh)
+
+    const interactionHeadMesh = new Mesh(new BoxGeometry(0.15, 0.15, 0.15), material)
+    interactionHeadMesh.visible = false
+    interactionHeadMesh.pointerEventsOrder = Infinity
+    interactionHeadMesh.rotation.copy(rotation)
+
+    headGroup.add(interactionHeadMesh)
+
+    const unregister = this.context.registerHandle(this.store, interactionHeadMesh, this.tag)
+
+    return () => {
+      material.dispose()
+      visualizationHeadMesh.geometry.dispose()
+      unregister()
+      cleanupHeadHover?.()
+      this.remove(headGroup)
+    }
+  }
+}