diff --git a/src/animation/Home.ts b/src/animation/Home.ts index 23a0cfc..e7d5d13 100644 --- a/src/animation/Home.ts +++ b/src/animation/Home.ts @@ -7,6 +7,7 @@ import {colors, config} from "@/animation/Config" import Cursor from "@/animation/components/Cursor"; import IUpdatable from "@/animation/components/IUpdatable"; import Grid from "@/animation/components/Grid"; +import Editor from "@/animation/components/Editor"; export let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera const clock = new THREE.Clock() @@ -28,7 +29,7 @@ function init(): void lineSegments.computeLineDistances() updatable.push(new Cursor(scene, config.cursor, camera)) - updatable.push(new Grid()) + updatable.push(new Grid(), new Editor()) objects.box = lineSegments scene.add(lineSegments) diff --git a/src/animation/Trackers.ts b/src/animation/Trackers.ts index d1588cc..b43d96e 100644 --- a/src/animation/Trackers.ts +++ b/src/animation/Trackers.ts @@ -1,7 +1,9 @@ -// import * as THREE from 'three' +import * as THREE from 'three' +import {Vector3} from 'three' +import {camera} from "@/animation/Home"; export let mouse: MouseEvent -export const moused = {x: 0, y: 0} +export const moused = {x: 0, y: 0, pos: new Vector3()} /** * Initialize mouse tracker @@ -13,5 +15,14 @@ export function initMouseTracker(): void mouse = e moused.x = e.clientX / window.innerWidth * 2 - 1 moused.y = -(e.clientY / window.innerHeight * 2 - 1) + + // Project to 3d position + // https://www.reddit.com/r/threejs/comments/eba9l3/3d_cursor_using_threejs_html_css/ + // https://jsfiddle.net/atwfxdpd/10/ + const vector = new THREE.Vector3(moused.x, moused.y, 0.5) + vector.unproject(camera) + const dir = vector.sub(camera.position).normalize() + const distance = -camera.position.z / dir.z + moused.pos = camera.position.clone().add(dir.multiplyScalar(distance)) } } diff --git a/src/animation/components/Cursor.ts b/src/animation/components/Cursor.ts index 01308fc..e4f9f10 100644 --- a/src/animation/components/Cursor.ts +++ b/src/animation/components/Cursor.ts @@ -29,16 +29,8 @@ export default class Cursor implements IUpdatable update(dt: number): void { this.circle.update(dt) - // Move cursor https://www.reddit.com/r/threejs/comments/eba9l3/3d_cursor_using_threejs_html_css/ - // https://jsfiddle.net/atwfxdpd/10/ - - const vector = new THREE.Vector3(moused.x, moused.y, 0.5) - vector.unproject(this.camera) - const dir = vector.sub(this.camera.position).normalize() - const distance = -this.camera.position.z / dir.z - const pos = this.camera.position.clone().add(dir.multiplyScalar(distance)) - this.dot.position.copy(pos) - this.circle.position.copy(pos) + this.dot.position.copy(moused.pos) + this.circle.position.copy(moused.pos) } } diff --git a/src/animation/components/Editor.ts b/src/animation/components/Editor.ts new file mode 100644 index 0000000..0b856e0 --- /dev/null +++ b/src/animation/components/Editor.ts @@ -0,0 +1,32 @@ +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"; + +export default class Editor implements IUpdatable +{ + hand: Mesh + radius = 10 + scale = 1 + + constructor() + { + this.hand = circle('#664400', 0, 10) + 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) + }, false) + } + + update(dt: number): void + { + this.hand.position.copy(moused.pos) + return + } +}