diff --git a/src/animation/Config.ts b/src/animation/Config.ts index 269b30f..35501e6 100644 --- a/src/animation/Config.ts +++ b/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 } diff --git a/src/animation/Home.ts b/src/animation/Home.ts index ff2b0dd..bde7e3d 100644 --- a/src/animation/Home.ts +++ b/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) } diff --git a/src/animation/components/Cursor.ts b/src/animation/components/Cursor.ts index b0582f7..ec33b79 100644 --- a/src/animation/components/Cursor.ts +++ b/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) } } diff --git a/src/animation/components/IUpdatable.ts b/src/animation/components/IUpdatable.ts new file mode 100644 index 0000000..4ab5909 --- /dev/null +++ b/src/animation/components/IUpdatable.ts @@ -0,0 +1,4 @@ +export default interface IUpdatable +{ + update: (dt: number) => void +}