From 5605445a7c210288fbda13b922b650e5f9e69e62 Mon Sep 17 00:00:00 2001 From: Hykilpikonna Date: Sat, 11 Dec 2021 18:54:10 -0500 Subject: [PATCH] [+] Editor mouse keybinds --- src/animation/Config.ts | 5 +++- src/animation/Home.ts | 3 ++- src/animation/components/Editor.ts | 37 +++++++++++++++++++++++------- 3 files changed, 35 insertions(+), 10 deletions(-) diff --git a/src/animation/Config.ts b/src/animation/Config.ts index c3264b8..26ffe7f 100644 --- a/src/animation/Config.ts +++ b/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 = { diff --git a/src/animation/Home.ts b/src/animation/Home.ts index 6c30969..63728d5 100644 --- a/src/animation/Home.ts +++ b/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) diff --git a/src/animation/components/Editor.ts b/src/animation/components/Editor.ts index 0b856e0..cf78131 100644 --- a/src/animation/components/Editor.ts +++ b/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 } }