reverse mouse 3d controls

Reverses default mouse 3d controls, and allows panning in the z axis by
default. Creates new Scene settings to allow switching back to original
mouse controls.

Author: pdragy

packages/studio-base/src/i18n/en/threeDee.ts

@@ -54,6 +54,12 @@ export const threeDee = {
   meshUpAxis: "Mesh up axis",
   meshUpAxisHelp:
     "The direction to use as “up” when loading meshes without orientation info (STL and OBJ)",
+  reverseMouse: "Reverse mouse buttons",
+  reverseMouseHelp:
+    "Reverse left and right mouse buttons for pan and rotate 3D control",
+  lockPanning: "Lock XY panning",
+  lockPanningHelp:
+    "Only allow panning on the XY plane",
   renderStats: "Render stats",
   scene: "Scene",
   takeEffectAfterReboot: "This setting requires a restart to take effect",

packages/studio-base/src/i18n/ja/threeDee.ts

@@ -57,6 +57,10 @@ export const threeDee: Partial<TypeOptions["resources"]["threeDee"]> = {
   meshUpAxis: "メッシュの上軸",
   meshUpAxisHelp:
     "方向を使用してメッシュを読み込むときに '上' として使用する方向（STL および OBJ）",
+  reverseMouse: "マウスを逆にする",
+  reverseMouseHelp: "マウスを逆にする",
+  lockPanning: "XYパンをロック",
+  lockPanningHelp: "XYパンをロック",
   renderStats: "レンダリングの統計情報",
   scene: "シーン",
   takeEffectAfterReboot: "この設定は再起動後に有効になります。",

packages/studio-base/src/i18n/zh/threeDee.ts

@@ -53,6 +53,10 @@ export const threeDee: Partial<TypeOptions["resources"]["threeDee"]> = {
   labelScaleHelp: "应用于所有标签的比例因子",
   meshUpAxis: "网格上轴",
   meshUpAxisHelp: "加载缺少方向信息的网格（STL 和 OBJ）时使用的“上”方向",
+  reverseMouse: "反向鼠标",
+  reverseMouseHelp: "反向鼠标",
+  lockPanning: "锁定 XY 平移",
+  lockPanningHelp: "锁定 XY 平移",
   renderStats: "渲染统计",
   scene: "场景",
   takeEffectAfterReboot: "此设置需要重新启动以生效",

packages/studio-base/src/panels/ThreeDeeRender/IRenderer.ts

@@ -117,6 +117,10 @@ export type RendererConfig = {
     /** Ignore the <up_axis> tag in COLLADA files (matching rviz behavior) */
     ignoreColladaUpAxis?: boolean;
     meshUpAxis?: MeshUpAxis;
+    /** Reverse the mouse controls (matching rviz behavior) */
+    reverseMouse?: boolean;
+    /** Lock panning to XY plane only */
+    lockPanning?: boolean;
     transforms?: {
       /** Toggles translation and rotation offset controls for frames */
       editable?: boolean;
@@ -332,6 +336,8 @@ export interface IRenderer extends EventEmitter<RendererEvents> {
 
   getCameraState(): CameraState | undefined;
 
+  updateControls(): void;
+
   /** Whether the view has been modified and a reset button should be shown (image mode only). */
   canResetView(): boolean;
   /** Reset any manual view modifications (image mode only). */

packages/studio-base/src/panels/ThreeDeeRender/Renderer.ts

@@ -918,6 +918,10 @@ export class Renderer extends EventEmitter<RendererEvents> implements IRenderer
     return this.cameraHandler.getCameraState();
   }
 
+  public updateControls(): void {
+      return this.cameraHandler.updateControls();
+  }
+
   public canResetView(): boolean {
     return this.#imageModeExtension?.hasModifiedView() ?? false;
   }

packages/studio-base/src/panels/ThreeDeeRender/renderables/CameraStateSettings.ts

@@ -84,11 +84,8 @@ export class CameraStateSettings extends SceneExtension implements ICameraHandle
     this.add(this.#cameraGroup);
 
     this.#controls = new OrbitControls(this.#perspectiveCamera, this.#canvas);
-    this.#controls.screenSpacePanning = false; // only allow panning in the XY plane
-    this.#controls.mouseButtons.LEFT = THREE.MOUSE.PAN;
-    this.#controls.mouseButtons.RIGHT = THREE.MOUSE.ROTATE;
-    this.#controls.touches.ONE = THREE.TOUCH.PAN;
-    this.#controls.touches.TWO = THREE.TOUCH.DOLLY_ROTATE;
+    this.updateControls();
+
     this.#controls.addEventListener("change", () => {
       if (!this.#isUpdatingCameraState) {
         renderer.emit("cameraMove", renderer);
@@ -493,6 +490,27 @@ export class CameraStateSettings extends SceneExtension implements ICameraHandle
     };
   }
 
+  public updateControls(): void {
+    this.#isUpdatingCameraState = true;
+    if (this.renderer.config.scene.lockPanning ?? false) {
+      this.#controls.screenSpacePanning = false;
+    } else {
+      this.#controls.screenSpacePanning = true;
+    }
+    if (this.renderer.config.scene.reverseMouse ?? false) {
+      this.#controls.mouseButtons.LEFT = THREE.MOUSE.PAN;
+      this.#controls.mouseButtons.RIGHT = THREE.MOUSE.ROTATE;
+      this.#controls.touches.ONE = THREE.TOUCH.PAN;
+      this.#controls.touches.TWO = THREE.TOUCH.DOLLY_ROTATE;
+    } else {
+      this.#controls.mouseButtons.LEFT = THREE.MOUSE.ROTATE;
+      this.#controls.mouseButtons.RIGHT = THREE.MOUSE.PAN;
+      this.#controls.touches.ONE = THREE.TOUCH.ROTATE;
+      this.#controls.touches.TWO = THREE.TOUCH.DOLLY_PAN;
+    }
+    this.#isUpdatingCameraState = false;
+  }
+
   public setCameraState(cameraState: CameraState): void {
     this.#isUpdatingCameraState = true;
     this.#updateCameras(cameraState);

packages/studio-base/src/panels/ThreeDeeRender/renderables/ICameraHandler.ts

@@ -17,6 +17,10 @@ export interface ICameraHandler extends SceneExtension {
    * @param state - The new camera state
    */
   setCameraState(state: CameraState | undefined): void;
+  /**
+   * Update the orbital controls
+   */
+  updateControls (): void;
   /**
    * Gets the state of the camera if interface mode supports it, otherwise undefined
    */

packages/studio-base/src/panels/ThreeDeeRender/renderables/ImageMode/ImageMode.ts

@@ -944,6 +944,10 @@ export class ImageMode
     return undefined;
   }
 
+  public updateControls(): undefined {
+    return undefined;
+  }
+
   #handleErrorChange = (): void => {
     this.updateSettingsTree();
   };

packages/studio-base/src/panels/ThreeDeeRender/renderables/SceneSettings.ts

@@ -83,6 +83,18 @@ export class SceneSettings extends SceneExtension {
             ? t("threeDee:takeEffectAfterReboot")
             : undefined,
       },
+      reverseMouse: {
+        label: t("threeDee:reverseMouse"),
+        help: t("threeDee:reverseMouseHelp"),
+        input: "boolean",
+        value: config.scene.reverseMouse,
+      },
+      lockPanning: {
+        label: t("threeDee:lockPanning"),
+        help: t("threeDee:lockPanningHelp"),
+        input: "boolean",
+        value: config.scene.lockPanning,
+      },
     };
 
     if (process.env.NODE_ENV === "production") {
@@ -133,6 +145,8 @@ export class SceneSettings extends SceneExtension {
       } else if (path[1] === "labelScaleFactor") {
         const labelScaleFactor = value as number | undefined;
         this.renderer.labelPool.setScaleFactor(labelScaleFactor ?? DEFAULT_LABEL_SCALE_FACTOR);
+      } else if (path[1] === "reverseMouse" || path[1] === "lockPanning") {
+        this.renderer.updateControls();
       }
     } else {
       return;