diff --git a/src/animation/Helpers.ts b/src/animation/Helpers.ts index aefaf27..3e29fb7 100644 --- a/src/animation/Helpers.ts +++ b/src/animation/Helpers.ts @@ -39,7 +39,7 @@ export function box(width: number, height: number, depth: number): THREE.BufferG * @param r * @param hollow */ -export function circle(color: number, z: number, r: number, hollow = false): THREE.Object3D +export function circle(color: THREE.Color | number | string, z: number, r: number, hollow = false): THREE.Object3D { const geometry = new THREE.CircleGeometry(r, 32) const material = new THREE.MeshBasicMaterial({color}) diff --git a/src/animation/components/Cursor.ts b/src/animation/components/Cursor.ts index 10ef753..81262c8 100644 --- a/src/animation/components/Cursor.ts +++ b/src/animation/components/Cursor.ts @@ -3,22 +3,41 @@ import {BufferGeometry, Color} from "three"; import {MeshLine, MeshLineMaterial} from 'meshline'; import IUpdatable from "@/animation/components/IUpdatable"; import {moused} from "@/animation/Trackers"; +import {circle} from "@/animation/Helpers"; type CursorConfig = {radius: number, color: Color, width: number} export default class Cursor implements IUpdatable { + camera: THREE.Camera circle: CursorCircle + dot: THREE.Object3D constructor(scene: THREE.Scene, conf: CursorConfig, camera: THREE.Camera) { + this.camera = camera this.circle = new CursorCircle(conf, camera) scene.add(this.circle) + + this.dot = circle('#000', 0, 0.3) + scene.add(this.dot) + + this.circle.visible = false } 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) } } @@ -49,13 +68,6 @@ export class CursorCircle extends THREE.Mesh implements IUpdatable update(dt: number): void { - // 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.position.copy(pos) + return } }