[+] Editor mouse keybinds

src/animation/Config.ts

@@ -18,7 +18,10 @@ export const config = {
     debug: false,
 
     // Edit mode
-    editMode: true
+    editMode: true,
+
+    // Editor config
+    editor: {zMin: 70, zMax: 90}
 }
 
 export const colors = {

src/animation/Home.ts

@@ -10,6 +10,7 @@ import Grid from "@/animation/components/Grid";
 import Editor from "@/animation/components/Editor";
 
 export let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera
+export let editor: Editor
 const clock = new THREE.Clock()
 const objects: { [id: string]: THREE.Object3D } = {}
 const updatable: IUpdatable[] = []
@@ -29,7 +30,7 @@ function init(): void
     lineSegments.computeLineDistances()
 
     updatable.push(new Cursor(scene, config.cursor, camera))
-    updatable.push(new Grid(), new Editor())
+    updatable.push(new Grid(), editor = new Editor())
 
     objects.box = lineSegments
     scene.add(lineSegments)

src/animation/components/Editor.ts

@@ -2,31 +2,52 @@ import {Mesh, Object3D} from "three";
 import IUpdatable from "@/animation/components/IUpdatable";
 import {circle} from "@/animation/Helpers";
 import {camera, scene} from "@/animation/Home";
-import {moused} from "@/animation/Trackers";
+import {moused, projectTo3D} from "@/animation/Trackers";
+import {config} from "@/animation/Config";
+import {minMax} from "@/utils";
 
 export default class Editor implements IUpdatable
 {
     hand: Mesh
-    radius = 10
+    color = '#664400'
+    radius = 3
     scale = 1
+    z = config.editor.zMax
 
     constructor()
     {
-        this.hand = circle('#664400', 0, 10)
+        this.hand = circle(this.color, 0, this.radius)
         scene.add(this.hand)
 
         window.addEventListener('wheel', (e) =>
         {
-            // e.preventDefault()
-            console.log(e.deltaY)
-            this.scale -= e.deltaY / 120 / 10
-            this.hand.scale.set(this.scale, this.scale, this.scale)
+            let direction = (e.detail < 0 || e.deltaY > 0) ? 1 : -1;
+
+            // Shift to micro-adjust
+            if (e.shiftKey) direction /= 10
+
+            // Ctrl + Alt to shift the entire plane
+            if (e.altKey && e.ctrlKey)
+            {
+                // TODO
+                return
+            }
+
+            // Scroll to adjust z, alt + scroll to adjust radius
+            if (e.altKey)
+            {
+                this.scale -= direction / 10
+                this.hand.scale.set(this.scale, this.scale, this.scale)
+            }
+            else this.z = minMax(this.z - direction, config.editor.zMin, config.editor.zMax)
+
         }, false)
     }
 
     update(dt: number): void
     {
-        this.hand.position.copy(moused.pos)
+        const pos = projectTo3D(moused.x, moused.y, this.z)
+        this.hand.position.copy(pos)
         return
     }
 }