diff --git a/src/controls.ts b/src/controls.ts index 0260a24..76283d6 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -13,6 +13,7 @@ interface IJoints { * the robot joints */ export class URDFControls extends GUI { + private _orbitControlsFolder: any; private _workspaceFolder: any; private _sceneFolder: any; private _jointsFolder: any; @@ -20,6 +21,7 @@ export class URDFControls extends GUI { 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 * diff --git a/src/layout.ts b/src/layout.ts index 9c022a7..d8902ff 100644 --- a/src/layout.ts +++ b/src/layout.ts @@ -181,6 +181,7 @@ export class URDFLayout extends PanelLayout { return; } + this._setOrbitControls(); this._setPathControls(); this._setSceneControls(); this._setJointControls(); @@ -188,6 +189,26 @@ export class URDFLayout extends PanelLayout { 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. diff --git a/src/renderer.ts b/src/renderer.ts index 2b4eb43..f389ea2 100644 --- a/src/renderer.ts +++ b/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 */