Orbit WASDEQ Controls

packages/viewer-sandbox/src/main.ts

@@ -4,9 +4,9 @@ import {
   SelectionEvent,
   ViewerEvent,
   Viewer,
-  CameraController,
   ViewModes,
-  SelectionExtension
+  SelectionExtension,
+  HybridCameraController
 } from '@speckle/viewer'
 
 import './style.css'
@@ -20,6 +20,7 @@ import {
 import { SectionTool } from '@speckle/viewer'
 import { SectionOutlines } from '@speckle/viewer'
 import { ViewModesKeys } from './Extensions/ViewModesKeys'
+// import { JSONSpeckleStream } from './JSONSpeckleStream'
 import { BoxSelection } from './Extensions/BoxSelection'
 import { PassReader } from './Extensions/PassReader'
 
@@ -45,7 +46,7 @@ const createViewer = async (containerName: string, _stream: string) => {
   const viewer: Viewer = new Viewer(container, params)
   await viewer.init()
 
-  const cameraController = viewer.createExtension(CameraController)
+  const cameraController = viewer.createExtension(HybridCameraController)
   const selection = viewer.createExtension(SelectionExtension)
   const sections = viewer.createExtension(SectionTool)
   viewer.createExtension(SectionOutlines)
@@ -458,6 +459,8 @@ const getStream = () => {
     // Perfectly flat
     // 'https://app.speckle.systems/projects/344f803f81/models/5582ab673e'
 
+    // big baker
+    // 'https://latest.speckle.systems/projects/126cd4b7bb/models/032d09f716'
     // 'https://speckle.xyz/streams/27e89d0ad6/commits/5ed4b74252'
 
     //Gingerbread

packages/viewer/src/modules/LegacyViewer.ts

@@ -44,6 +44,7 @@ import { BatchObject } from './batching/BatchObject.js'
 import { SpeckleLoader } from './loaders/Speckle/SpeckleLoader.js'
 import Logger from './utils/Logger.js'
 import { ViewModes } from './extensions/ViewModes.js'
+import { HybridCameraController } from './extensions/HybridCameraController.js'
 
 class LegacySelectionExtension extends SelectionExtension {
   /** FE2 'manually' selects objects pon it's own, so we're disabling the extension's event handler
@@ -120,7 +121,7 @@ export class LegacyViewer extends Viewer {
     params: ViewerParams = DefaultViewerParams
   ) {
     super(container, params)
-    this.cameraController = this.createExtension(CameraController)
+    this.cameraController = this.createExtension(HybridCameraController)
     this.selection = this.createExtension(LegacySelectionExtension)
     this.sections = this.createExtension(SectionTool)
     this.createExtension(SectionOutlines)

packages/viewer/src/modules/Viewer.ts

@@ -202,7 +202,7 @@ export class Viewer extends EventEmitter implements IViewer {
   }
 
   private update() {
-    const delta = this.clock.getDelta()
+    const delta = this.clock.getDelta() * 1000 // turn to miliseconds
     const extensions = Object.values(this.extensions)
     extensions.forEach((ext: Extension) => {
       ext.onEarlyUpdate(delta)

packages/viewer/src/modules/extensions/CameraController.ts

@@ -23,9 +23,6 @@ import {
   SmoothOrbitControls
 } from './controls/SmoothOrbitControls.js'
 
-// const UP: Vector3 = new Vector3(0, 1, 0)
-// const quatBuff = new Quaternion()
-
 export enum NearPlaneCalculation {
   EMPIRIC,
   ACCURATE
@@ -94,10 +91,13 @@ export const DefaultOrbitControlsOptions: Required<CameraControllerOptions> = {
   touchAction: 'none',
   infiniteZoom: true,
   zoomToCursor: true,
+  orbitAroundCursor: true,
+  showOrbitPoint: true,
   lookSpeed: 1,
   moveSpeed: 1,
   damperDecay: 30,
   enableLook: true,
+  relativeUpDown: false,
   nearPlaneCalculation: NearPlaneCalculation.ACCURATE
 }
 
@@ -108,7 +108,8 @@ export class CameraController extends Extension implements SpeckleCamera {
   protected _lastCameraChanged: boolean = false
   protected _options: Required<CameraControllerOptions> = DefaultOrbitControlsOptions
   protected _activeControls: SpeckleControls
-  protected _controlsList: SpeckleControls[] = []
+  protected _orbitControls: SmoothOrbitControls
+  protected _flyControls: FlyControls
 
   get renderingCamera(): PerspectiveCamera | OrthographicCamera {
     return this._renderingCamera
@@ -149,9 +150,8 @@ export class CameraController extends Extension implements SpeckleCamera {
 
   public set options(value: CameraControllerOptions) {
     Object.assign(this._options, value)
-    this._controlsList.forEach((controls: SpeckleControls) => {
-      controls.options = value
-    })
+    this._orbitControls.options = value
+    this._flyControls.options = value
   }
 
   public constructor(viewer: IViewer) {
@@ -180,32 +180,28 @@ export class CameraController extends Extension implements SpeckleCamera {
     /** Perspective camera as default on startup */
     this.renderingCamera = this.perspectiveCamera
 
-    const flyControls = new FlyControls(
+    this._flyControls = new FlyControls(
       this._renderingCamera,
       this.viewer.getContainer(),
       this.viewer.World,
       this._options
     )
-    flyControls.enabled = false
-    flyControls.setDamperDecayTime(30)
-    flyControls.up = new Vector3(0, 0, 1)
+    this._flyControls.enabled = false
+    this._flyControls.setDamperDecayTime(30)
+    this._flyControls.up = new Vector3(0, 0, 1)
 
-    const orbitControls = new SmoothOrbitControls(
+    this._orbitControls = new SmoothOrbitControls(
       this.perspectiveCamera,
       this.viewer.getContainer(),
       this.viewer.World,
-      this.viewer.getRenderer().scene,
-      this.viewer.getRenderer().intersections,
+      this.viewer.getRenderer(),
       this._options
     )
-    orbitControls.enabled = true
+    this._orbitControls.enabled = true
 
     this.viewer.getRenderer().speckleCamera = this
 
-    this._controlsList.push(orbitControls)
-    this._controlsList.push(flyControls)
-
-    this._activeControls = orbitControls
+    this._activeControls = this._orbitControls
 
     this.default()
   }
@@ -238,18 +234,19 @@ export class CameraController extends Extension implements SpeckleCamera {
     let newControls: SpeckleControls | undefined = undefined
 
     if (this._activeControls instanceof SmoothOrbitControls) {
-      newControls = this._controlsList[1]
+      newControls = this._flyControls
     } else if (this._activeControls instanceof FlyControls) {
-      newControls = this._controlsList[0]
+      newControls = this._orbitControls
     }
 
     if (!newControls) throw new Error('Not controls found!')
 
     oldControls.enabled = false
     newControls.enabled = true
+
     newControls.fromPositionAndTarget(
-      oldControls.getPosition(),
-      oldControls.getTarget()
+      oldControls.getCurrentPosition(),
+      oldControls.getCurrentTarget()
     )
     newControls.jumpToGoal()
     this._activeControls = newControls
@@ -295,8 +292,8 @@ export class CameraController extends Extension implements SpeckleCamera {
     this.emit(CameraEvent.Dynamic)
   }
 
-  public onEarlyUpdate() {
-    const changed = this._activeControls.update()
+  public onEarlyUpdate(_delta?: number) {
+    const changed = this._activeControls.update(_delta)
     if (changed !== this._lastCameraChanged) {
       this.emit(changed ? CameraEvent.Dynamic : CameraEvent.Stationary)
     }
@@ -424,6 +421,9 @@ export class CameraController extends Extension implements SpeckleCamera {
     fallback?: number
   ): number | undefined {
     const minDist = this.getClosestGeometryDistance(fallback)
+    this._flyControls.minDist = minDist
+    this._orbitControls.minDist = minDist
+
     if (minDist === Number.POSITIVE_INFINITY) {
       return this.computeNearCameraPlaneEmpiric(targetVolume, offsetScale)
     }
@@ -472,8 +472,8 @@ export class CameraController extends Extension implements SpeckleCamera {
   }
 
   protected getClosestGeometryDistance(fallback?: number): number {
-    const cameraPosition = this._renderingCamera.position
-    const cameraTarget = this.getTarget()
+    const cameraPosition = this._activeControls.getCurrentPosition()
+    const cameraTarget = this._activeControls.getCurrentTarget()
     const cameraDir = new Vector3().subVectors(cameraTarget, cameraPosition).normalize()
 
     const batches = this.viewer

packages/viewer/src/modules/extensions/HybridCameraController.ts

@@ -1,4 +1,3 @@
-import { clamp } from 'three/src/math/MathUtils.js'
 import { IViewer } from '../../IViewer.js'
 import { CameraController } from './CameraController.js'
 type MoveType = 'forward' | 'back' | 'left' | 'right' | 'up' | 'down'
@@ -12,13 +11,28 @@ export class HybridCameraController extends CameraController {
     up: false,
     down: false
   }
+
+  protected contextMenuTriggered = false
+
   public constructor(viewer: IViewer) {
     super(viewer)
     document.addEventListener('keydown', this.onKeyDown.bind(this))
+    document.addEventListener('keyup', this.onKeyUp.bind(this))
+    document.addEventListener('contextmenu', this.onContextMenu.bind(this))
+  }
+
+  public onEarlyUpdate(_delta?: number): void {
+    super.onEarlyUpdate(_delta)
+    /** We do this because sometimes while holding a kewy down you get an extra
+     *  key down event **after** the context menu event, locking it in place
+     */
+    if (this.contextMenuTriggered) {
+      this.cancelMove()
+      this.contextMenuTriggered = false
+    }
   }
 
   protected onKeyDown(event: KeyboardEvent) {
-    let moveSpeed = this.options.moveSpeed ? this.options.moveSpeed : 1
     switch (event.code) {
       case 'ArrowUp':
       case 'KeyW':
@@ -41,27 +55,17 @@ export class HybridCameraController extends CameraController {
         break
 
       case 'PageUp':
-      case 'KeyQ':
+      case 'KeyE':
         this.keyMap.up = true
         break
 
       case 'PageDown':
-      case 'KeyE':
+      case 'KeyQ':
         this.keyMap.down = true
         break
-      case 'KeyF':
-        moveSpeed += 0.25
-        moveSpeed = clamp(moveSpeed, 0.1, 5)
-        this.options = { moveSpeed }
-        break
-      case 'KeyC':
-        moveSpeed -= 0.25
-        moveSpeed = clamp(moveSpeed, 0.1, 5)
-        this.options = { moveSpeed }
-        break
     }
     if (
-      !this._controlsList[1].enabled &&
+      !this._flyControls.enabled &&
       Object.values(this.keyMap).some((v) => v === true)
     )
       this.toggleControls()
@@ -90,17 +94,35 @@ export class HybridCameraController extends CameraController {
         break
 
       case 'PageUp':
-      case 'KeyQ':
+      case 'KeyE':
         this.keyMap.up = false
         break
 
       case 'PageDown':
-      case 'KeyE':
+      case 'KeyQ':
         this.keyMap.down = false
         break
     }
     if (
-      this._controlsList[1].enabled &&
+      this._flyControls.enabled &&
+      Object.values(this.keyMap).every((v) => v === false)
+    )
+      this.toggleControls()
+  }
+
+  protected onContextMenu() {
+    this.contextMenuTriggered = true
+  }
+
+  protected cancelMove() {
+    this.keyMap.back = false
+    this.keyMap.forward = false
+    this.keyMap.down = false
+    this.keyMap.up = false
+    this.keyMap.left = false
+    this.keyMap.right = false
+    if (
+      this._flyControls.enabled &&
       Object.values(this.keyMap).every((v) => v === false)
     )
       this.toggleControls()