add view helper

packages/editor/src/editor/core/editor.ts

@@ -29,6 +29,7 @@ export class Editor extends GameRunner {
   override mount(element: HTMLElement) {
     this.element = element;
     this.render = new Renderer(element);
+    this.render.renderer.autoClear = false;
 
     this.viewport = new ViewportComponent(this.render, this.events);
     this.viewport.initialize();
@@ -66,6 +67,7 @@ export class Editor extends GameRunner {
     this.mouse.update(delta);
 
     this.render.render();
+    this.workspace.render();
   }
 
   override start() {

packages/editor/src/editor/core/workspace.ts

@@ -30,8 +30,9 @@ import {
   SelectionEvent,
   TransformModeEvent,
 } from '../types/events';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
+import { TransformControls } from 'three/addons/controls/TransformControls.js';
+import { ViewHelper } from 'three/addons/helpers/ViewHelper.js';
 
 /**
  * This component does most of the work related to editing the level.
@@ -49,6 +50,7 @@ export class WorkspaceComponent extends EngineComponent {
   private grid!: GridHelper;
   private box!: BoxHelper;
   private axes!: AxesHelper;
+  private viewHelper!: ViewHelper;
 
   public transformPosition?: Vector3;
   public transformRotation?: Euler;
@@ -77,11 +79,20 @@ export class WorkspaceComponent extends EngineComponent {
   update(dt: number) {
     this.orbitControls?.update();
     this.box?.update();
+
+    if (this.viewHelper.animating) {
+      this.viewHelper.update(dt);
+    }
+  }
+
+  render() {
+    this.viewHelper?.render(this.renderer.renderer);
   }
 
   cleanUp(): void {
     this.removeFromScene(this.renderer.scene);
     this.cleanUpEvents?.call(this);
+    this.viewHelper?.dispose();
   }
 
   private addToScene(scene: Object3D) {
@@ -113,7 +124,15 @@ export class WorkspaceComponent extends EngineComponent {
     let clicked = false;
     let casterDebounce: ReturnType<typeof setTimeout> | undefined;
 
-    const mouseDownEventHandler = () => {
+    const mouseDownEventHandler = (ev: MouseButtonEvent) => {
+      if (
+        ev.position.x > this.renderer.resolution.x - 128 &&
+        ev.position.y > this.renderer.resolution.y - 128
+      ) {
+        this.viewHelper.handleClick(ev.raw);
+        return;
+      }
+
       moved = false;
       clicked = true;
     };
@@ -409,6 +428,11 @@ export class WorkspaceComponent extends EngineComponent {
   }
 
   private initializeHelpers() {
+    this.viewHelper = new ViewHelper(
+      this.renderer.camera,
+      this.renderer.renderer.domElement
+    );
+
     this.grid = new GridHelper(100, 100);
     this.background.add(this.grid);
 
@@ -452,6 +476,8 @@ export class WorkspaceComponent extends EngineComponent {
     this.transformControls.setMode(mode);
     this.helpers.add(this.transformControls);
 
+    this.viewHelper.center = this.orbitControls.target;
+
     this.transformControls.addEventListener('mouseDown', () => {
       this.orbitControls.enabled = false;
       const target = this.transformControls.object;

packages/engine/src/components/mouse.ts

@@ -62,6 +62,7 @@ export class MouseComponent extends EngineComponent {
         shift: ev.shiftKey,
         control: ev.ctrlKey,
         alt: ev.altKey,
+        raw: ev,
       });
     };
 
@@ -76,6 +77,7 @@ export class MouseComponent extends EngineComponent {
         shift: ev.shiftKey,
         control: ev.ctrlKey,
         alt: ev.altKey,
+        raw: ev,
       });
     };
 
@@ -94,6 +96,7 @@ export class MouseComponent extends EngineComponent {
         positionGL: this.mousePositionGL,
         offset: this.mousePositionLast.clone().sub(this.mousePosition),
         offsetGL: this.mousePositionGLLast.clone().sub(this.mousePositionGL),
+        raw: ev,
       });
     };
 

packages/engine/src/core/renderer.ts

@@ -26,6 +26,7 @@ export class Renderer {
   }
 
   render() {
+    this.renderer.clear();
     this.renderer.render(this.scene, this.camera);
   }
 

packages/engine/src/types/events.ts

@@ -10,6 +10,7 @@ import { WorldFile } from './world-file';
 export interface MousePositionEvent {
   position: Vector2;
   positionGL: Vector2;
+  raw: MouseEvent;
 }
 
 export interface MouseMoveEvent extends MousePositionEvent {