[+] Add mouse z to tracker

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)

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))
     }
 }

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/
+        this.dot.position.copy(moused.pos)
-        // https://jsfiddle.net/atwfxdpd/10/
+        this.circle.position.copy(moused.pos)
-
-        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)
     }
 }
 

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
+    }
+}