diff --git a/src/animation/Home.ts b/src/animation/Home.ts index bde7e3d..c6454d4 100644 --- a/src/animation/Home.ts +++ b/src/animation/Home.ts @@ -26,9 +26,7 @@ function init(): void })) lineSegments.computeLineDistances() - const cursor = objects.cursor = new Cursor(config.cursor, camera) - scene.add(cursor) - updatable.push(cursor) + updatable.push(new Cursor(scene, config.cursor, camera)) objects.box = lineSegments scene.add(lineSegments) diff --git a/src/animation/components/Cursor.ts b/src/animation/components/Cursor.ts index e50f7aa..10ef753 100644 --- a/src/animation/components/Cursor.ts +++ b/src/animation/components/Cursor.ts @@ -4,11 +4,29 @@ import {MeshLine, MeshLineMaterial} from 'meshline'; import IUpdatable from "@/animation/components/IUpdatable"; import {moused} from "@/animation/Trackers"; -export default class Cursor extends THREE.Mesh implements IUpdatable +type CursorConfig = {radius: number, color: Color, width: number} + +export default class Cursor implements IUpdatable +{ + circle: CursorCircle + + constructor(scene: THREE.Scene, conf: CursorConfig, camera: THREE.Camera) + { + this.circle = new CursorCircle(conf, camera) + scene.add(this.circle) + } + + update(dt: number): void + { + this.circle.update(dt) + } +} + +export class CursorCircle extends THREE.Mesh implements IUpdatable { camera: THREE.Camera - constructor(conf: {radius: number, color: Color, width: number}, camera: THREE.Camera) + constructor(conf: CursorConfig, 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)