[+] Cursor

src/animation/Config.ts

@@ -16,6 +16,9 @@ export const config = {
     // Smooth movements (speeds are in terms of pixels per ms)
     smooth: {mouseSpeed: 10 * window.devicePixelRatio},
 
+    // Cursor
+    cursor: {radius: 2, width: 0.3, color: new Color('#333')},
+
     // Debug mode
     debug: true
 }

src/animation/Home.ts

@@ -4,10 +4,13 @@ import {circle} from "@/animation/Helpers"
 import {initMouseTracker, moused} from "@/animation/Trackers"
 import {addDirLight, addGround, addHemiLight, addSky} from "@/animation/Shaders"
 import {colors, config} from "@/animation/Config"
+import Cursor from "@/animation/components/Cursor";
+import IUpdatable from "@/animation/components/IUpdatable";
 
 let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera
 const clock = new THREE.Clock()
 const objects: { [id: string]: THREE.Object3D } = {}
+const updatable: IUpdatable[] = []
 
 // ////////////////////
 // Three.js scene code
@@ -23,9 +26,9 @@ function init(): void
     }))
     lineSegments.computeLineDistances()
 
-    const cursor = circle(0xffaa00, 100, 1)
-    objects.cursor = cursor
+    const cursor = objects.cursor = new Cursor(config.cursor, camera)
     scene.add(cursor)
+    updatable.push(cursor)
 
     objects.box = lineSegments
     scene.add(lineSegments)
@@ -54,13 +57,6 @@ function update(dt: number): void
 {
     // objects['cursor'].position.set(moused.x, moused.y, 150)
 
-    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
-    const pos = camera.position.clone().add(dir.multiplyScalar(distance))
-    objects.cursor.position.copy(pos)
-
     // smoothBuffer.cam.x = moused.x * config.mouseFactor
     // smoothBuffer.cam.y = moused.y * config.mouseFactor
     smoothUpdate()
@@ -152,6 +148,8 @@ function onWindowResize()
 function animate(): void
 {
     requestAnimationFrame(animate)
-    update(clock.getDelta())
+    const dt = clock.getDelta()
+    update(dt)
+    for (const o of updatable) o.update(dt)
     renderer.render(scene, camera)
 }

src/animation/components/Cursor.ts

@@ -1,10 +1,14 @@
 import * as THREE from "three";
 import {BufferGeometry, Color} from "three";
 import {MeshLine, MeshLineMaterial} from 'meshline';
+import IUpdatable from "@/animation/components/IUpdatable";
+import {moused} from "@/animation/Trackers";
 
-export default class Cursor extends THREE.Mesh
+export default class Cursor extends THREE.Mesh implements IUpdatable
 {
-    constructor(conf: {radius: number, color: Color, width: number})
+    camera: THREE.Camera
+
+    constructor(conf: {radius: number, color: Color, width: number}, camera: THREE.Camera)
     {
         // https://discourse.threejs.org/t/shift-vertices-of-circle-geometry-not-working/26664
         const pts = new THREE.Path().absarc(0, 0, conf.radius, 0, Math.PI * 2, true).getPoints(90)
@@ -12,8 +16,20 @@ export default class Cursor extends THREE.Mesh
         geometry.setGeometry(new BufferGeometry().setFromPoints(pts), () => 1)
 
         // MeshLine: https://stackoverflow.com/a/25759280/7346633
-        const material = new MeshLineMaterial({resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
-            color: conf.color, lineWidth: 1})
+        const material = new MeshLineMaterial({color: conf.color, lineWidth: conf.width,
+            resolution: new THREE.Vector2(window.innerWidth, window.innerHeight)})
         super(geometry, material)
+
+        this.camera = camera
+    }
+
+    update(dt: number): void
+    {
+        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.position.copy(pos)
     }
 }

src/animation/components/IUpdatable.ts

@@ -0,0 +1,4 @@
+export default interface IUpdatable
+{
+    update: (dt: number) => void
+}