add orbit controls

src/controls.ts

@@ -13,13 +13,15 @@ interface IJoints {
  * the robot joints
  */
 export class URDFControls extends GUI {
+  private _orbitControlsFolder: any;
   private _workspaceFolder: any;
   private _sceneFolder: any;
   private _jointsFolder: any;
   private _jointsEditorFolder: any;
   private _workingPath = '';
 
   controls: any = {
+    orbitControls: {},
     path: {},
     scene: {
       background: {},
@@ -59,6 +61,9 @@ export class URDFControls extends GUI {
       'dg editor-folder'
     );
 
+    this._orbitControlsFolder = this.addFolder('Orbit Controls');
+    this._orbitControlsFolder.domElement.setAttribute('class', 'dg camera-folder');
+
     this._workspaceFolder = this.addFolder('Workspace');
     this._workspaceFolder.domElement.setAttribute(
       'class',
@@ -129,6 +134,51 @@ export class URDFControls extends GUI {
     });
   }
 
+  /**
+   * Creates controls for panSpeed, zoomSpeed, rotateSpeed
+   *
+   * @returns - The controls to trigger callbacks when settings change
+   */
+  createOrbitControls() {
+    if (this._isEmpty(this.controls.orbitControls)) {
+      const orbitControlSettings = {
+        panSpeed: 2,
+        zoomSpeed: 1,
+        rotateSpeed: 2
+      };
+
+      const minValue = 0.1;
+      const maxValue = 5;
+      this.controls.orbitControls = {
+        panSpeed: this._orbitControlsFolder.add(
+          orbitControlSettings,
+          'panSpeed',
+          minValue,
+          maxValue
+        ),
+        zoomSpeed: this._orbitControlsFolder.add(
+          orbitControlSettings,
+          'zoomSpeed',
+          minValue,
+          maxValue
+        ),
+        rotateSpeed: this._orbitControlsFolder.add(
+          orbitControlSettings,
+          'rotateSpeed',
+          minValue,
+          maxValue
+        )
+      };
+
+      this._enforceNumericInput(this.controls.orbitControls.panSpeed);
+      this._enforceNumericInput(this.controls.orbitControls.zoomSpeed);
+      this._enforceNumericInput(this.controls.orbitControls.rotateSpeed);
+
+      this._orbitControlsFolder.open()
+    }
+    return this.controls.orbitControls;
+  }
+
   /**
    * Creates an input box and a button to modify the working path
    *

src/layout.ts

@@ -181,13 +181,34 @@ export class URDFLayout extends PanelLayout {
       return;
     }
 
+    this._setOrbitControls();
     this._setPathControls();
     this._setSceneControls();
     this._setJointControls();
     this._setLightControls();
     this._setEditorControls();
   }
 
+  /**
+   * Set OrbitControls for panSpeed, zoomSpeed, rotateSpeed
+   * render again.
+   */
+  private _setOrbitControls(): void {
+    const orbitControls = this._controlsPanel.createOrbitControls();
+
+    orbitControls.panSpeed.onChange((newPanSpeed: number) => {
+      this._renderer.setOrbitControlsPanSpeed(newPanSpeed);
+    });
+
+    orbitControls.zoomSpeed.onChange((newZoomSpeed: number) => {
+      this._renderer.setOrbitControlsZoomSpeed(newZoomSpeed);
+    });
+
+    orbitControls.rotateSpeed.onChange((newRotateSpeed: number) => {
+      this._renderer.setOrbitControlsRotateSpeed(newRotateSpeed);
+    });
+  }
+
   /**
    * Set callback for changing working directory to given user input and
    * render again.

src/renderer.ts

@@ -80,7 +80,7 @@ export class URDFRenderer extends THREE.WebGLRenderer {
    */
   private _initControls(): void {
     this._controls.rotateSpeed = 2.0;
-    this._controls.zoomSpeed = 5;
+    this._controls.zoomSpeed = 1;
     this._controls.panSpeed = 2;
     this._controls.enableZoom = true;
     this._controls.enableDamping = false;
@@ -448,6 +448,42 @@ export class URDFRenderer extends THREE.WebGLRenderer {
     }
   }
 
+  /**
+   * Updates the OrbitControl's speed of panning
+   *
+   * @param newPanSpeed - Speed of panning
+   */
+  setOrbitControlsPanSpeed(
+    newPanSpeed: number,
+  ): void {
+    this._controls.panSpeed = newPanSpeed;
+    this.redraw();
+  }
+
+  /**
+   * Updates the OrbitControl's speed of panning
+   *
+   * @param newZoomSpeed - Speed of zooming
+   */
+  setOrbitControlsZoomSpeed(
+    newZoomSpeed: number,
+  ): void {
+    this._controls.zoomSpeed = newZoomSpeed;
+    this.redraw();
+  }
+
+  /**
+   * Updates the OrbitControl's speed of panning
+   *
+   * @param newRotateSpeed - Speed of panning
+   */
+  setOrbitControlsRotateSpeed(
+    newRotateSpeed: number,
+  ): void {
+    this._controls.rotateSpeed = newRotateSpeed;
+    this.redraw();
+  }
+
   /**
    * Refreshes the viewer by re-rendering the scene and its elements
    */