WIP: Add ViewHelper

packages/base/package.json

@@ -66,6 +66,7 @@
     "styled-components": "^5.3.6",
     "three": "^0.135.0",
     "three-mesh-bvh": "^0.5.17",
+    "three-viewport-gizmo": "^0.1.5",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

packages/base/src/3dview/mainview.tsx

@@ -50,6 +50,8 @@ import {
 } from './helpers';
 import { MainViewModel } from './mainviewmodel';
 import { Spinner } from './spinner';
+import { ViewportGizmo } from 'three-viewport-gizmo';
+import { GizmoOptions } from 'three-viewport-gizmo/dist/lib/types';
 interface IProps {
   viewModel: MainViewModel;
 }
@@ -225,6 +227,96 @@ export class MainView extends React.Component<IProps, IStates> {
       this._renderer.setSize(500, 500, false);
       this.divRef.current.appendChild(this._renderer.domElement); // mount using React ref
 
+      const options: Omit<Required<GizmoOptions>, 'container'> = {
+        placement: 'top-right',
+        size: Math.min(window.innerWidth, window.innerHeight) * 0.8,
+        lineWidth: 3,
+        offset: { top: 0, left: 0, right: 0, bottom: 0 },
+        font: {
+          family: 'helvetica',
+          weight: 900
+        },
+        resolution: 64,
+        backgroundSphere: {
+          enabled: true,
+          color: 0xffffff,
+          opacity: 0.2
+        },
+        x: {
+          text: 'X',
+          drawLine: true,
+          border: false,
+          colors: {
+            main: '#ff7f9b',
+            hover: '#ffffff',
+            text: '#000000',
+            hoverText: '#000000'
+          }
+        },
+        y: {
+          text: 'Y',
+          drawLine: true,
+          border: false,
+          colors: {
+            main: '#c2ee00',
+            hover: '#ffffff',
+            text: '#000000',
+            hoverText: '#000000'
+          }
+        },
+        z: {
+          text: 'Z',
+          drawLine: true,
+          border: false,
+          colors: {
+            main: '#73c5ff',
+            hover: '#ffffff',
+            text: '#000000',
+            hoverText: '#000000'
+          }
+        },
+        nx: {
+          text: '-X',
+          drawLine: true,
+          border: false,
+          colors: {
+            main: '#ff7f9b',
+            hover: '#ffffff',
+            text: '#000000',
+            hoverText: '#000000'
+          }
+        },
+        ny: {
+          text: '-Y',
+          drawLine: true,
+          border: false,
+          colors: {
+            main: '#c2ee00',
+            hover: '#ffffff',
+            text: '#000000',
+            hoverText: '#000000'
+          }
+        },
+        nz: {
+          text: '-Z',
+          drawLine: true,
+          border: false,
+          colors: {
+            main: '#73c5ff',
+            hover: '#ffffff',
+            text: '#000000',
+            hoverText: '#000000'
+          }
+        }
+      };
+
+      this._viewportGizmo = new ViewportGizmo(
+        this._camera,
+        this._renderer,
+        options
+      );
+      this._viewportGizmo.update();
+
       this._syncPointer = throttle(
         (position: THREE.Vector3 | undefined, parent: string | undefined) => {
           if (position && parent) {
@@ -372,6 +464,7 @@ export class MainView extends React.Component<IProps, IStates> {
     this._renderer.setRenderTarget(null);
     this._renderer.clearDepth();
     this._renderer.render(this._scene, this._camera);
+    this._viewportGizmo.render();
   };
 
   resizeCanvasToDisplaySize = (): void => {
@@ -1393,6 +1486,7 @@ export class MainView extends React.Component<IProps, IStates> {
   private _geometry: THREE.BufferGeometry; // Threejs BufferGeometry
   private _refLength: number | null = null; // Length of bounding box of current object
   private _sceneAxe: THREE.Object3D | null; // Array of  X, Y and Z axe
+  private _viewportGizmo: ViewportGizmo; // Viewport gizmo
   private _controls: OrbitControls; // Mouse controls
   private _transformControls: TransformControls; // Mesh position/rotation controls
   private _pointer3D: IPointer | null = null;

yarn.lock

@@ -903,6 +903,7 @@ __metadata:
     styled-components: ^5.3.6
     three: ^0.135.0
     three-mesh-bvh: ^0.5.17
+    three-viewport-gizmo: ^0.1.5
     typescript: ^5
     uuid: ^8.3.2
   languageName: unknown
@@ -4741,6 +4742,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camera-controls@npm:^2.8.3":
+  version: 2.9.0
+  resolution: "camera-controls@npm:2.9.0"
+  peerDependencies:
+    three: ">=0.126.1"
+  checksum: 47e7150a72bb96310cc00dd82c8719b376e925fda963e58a13e5cc61e94d0d13a9065a423de739ad9f7e084854f891b6edf03990260a974ead869e28590fd109
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001646":
   version: 1.0.30001660
   resolution: "caniuse-lite@npm:1.0.30001660"
@@ -11932,13 +11942,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"three-viewport-gizmo@npm:^0.1.0, three-viewport-gizmo@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "three-viewport-gizmo@npm:0.1.5"
+  dependencies:
+    camera-controls: ^2.8.3
+    three: ^0.162.0
+    three-viewport-gizmo: ^0.1.0
+  checksum: f00619a6d3ac0cf4bb310ef2f55739747b3f2ce4904802dfd7cda53a5b9e1d71c17cd8b536343143a3ad0d86ce9a4343285461cbc27bfdb00577bd3a190a27d0
+  languageName: node
+  linkType: hard
+
 "three@npm:^0.135.0":
   version: 0.135.0
   resolution: "three@npm:0.135.0"
   checksum: bd7e195932587a5be0c887947adf2b3898c6fa71722800432562aed10beddb2f448d0f237d937824805eebf90e625fc22ed57054618121f47811a8e82b528507
   languageName: node
   linkType: hard
 
+"three@npm:^0.162.0":
+  version: 0.162.0
+  resolution: "three@npm:0.162.0"
+  checksum: f3ba4d518f7cb209b6e4f8818177c1230014fc1b3dcd66ab113a9babf8e2b522645a1eb144dfc0900bf194e8890bc5d04f358dd4a7f06ee8aa44db56224f88fc
+  languageName: node
+  linkType: hard
+
 "through2@npm:^2.0.0, through2@npm:^2.0.1":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"