diff --git a/src/animation/Home.ts b/src/animation/Home.ts index 913672f..9598868 100644 --- a/src/animation/Home.ts +++ b/src/animation/Home.ts @@ -1,9 +1,10 @@ import * as THREE from 'three' import * as helper from "@/animation/Helpers"; -import {initMouseTracker, moused, timed, updateTimeTracker} from "@/animation/Trackers"; +import {initMouseTracker, moused} from "@/animation/Trackers"; import {circle} from "@/animation/Helpers"; let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera +const clock = new THREE.Clock() const objects = [] const config = { @@ -13,8 +14,10 @@ const config = { cam: {fov: 50, near: 1, far: 2000}, // Mouse movement factor - mouseFactor: 10, - smooth: {}, + mouseFactor: 20, + + // Smooth movements (speeds are in terms of pixels per ms) + smooth: {mouseSpeed: 10 * window.devicePixelRatio}, } // //////////////////// @@ -41,18 +44,47 @@ function init(): void scene.add(circle(0xff0000, 4, 1)) } -function update(): void +// Buffer for smooth update +const smoothBuffer = {cam: {x: 0, y: 0}} + +function pn(b: boolean): number { - const time = Date.now() * 0.001; + return b ? 1 : -1 +} - camera.position.x = moused.x * config.mouseFactor - camera.position.y = moused.y * config.mouseFactor +/** + * Update frame + * + * @param dt delta time in ms + */ +function update(dt: number): void +{ + smoothBuffer.cam.x = moused.x * config.mouseFactor + smoothBuffer.cam.y = moused.y * config.mouseFactor + smoothUpdate() + // const time = Date.now() * 0.001 // scene.traverse((object) => // { // object.rotation.x = 0.25 * time; // object.rotation.y = 0.25 * time; // }); + + function smoothUpdate(): void + { + // Pixels moved = speed * time + const delta = config.smooth.mouseSpeed * dt + // Current position + const cp = camera.position + // Target position + const tp = smoothBuffer.cam + + if (Math.abs(cp.x - tp.x) > delta) { cp.x = cp.x + delta * pn(cp.x < tp.x) } + else { cp.x = tp.x } + + if (Math.abs(cp.y - tp.y) > delta) { cp.y = cp.y + delta * pn(cp.y < tp.y) } + else { cp.y = tp.y } + } } // /////////////////// @@ -96,7 +128,6 @@ function onWindowResize() function animate(): void { requestAnimationFrame(animate) - updateTimeTracker() - update() + update(clock.getDelta()) renderer.render(scene, camera) } diff --git a/src/animation/Trackers.ts b/src/animation/Trackers.ts index 06b845c..d1588cc 100644 --- a/src/animation/Trackers.ts +++ b/src/animation/Trackers.ts @@ -2,8 +2,6 @@ export let mouse: MouseEvent export const moused = {x: 0, y: 0} -export const timed = {dt: 0, dts: 0, elapsed: 0, start: Date.now(), last: Date.now(), - update: updateTimeTracker} /** * Initialize mouse tracker @@ -17,12 +15,3 @@ export function initMouseTracker(): void moused.y = -(e.clientY / window.innerHeight * 2 - 1) } } - -export function updateTimeTracker(): void -{ - const now = Date.now() - timed.elapsed = timed.start - now - timed.dt = timed.last - now - timed.dts = timed.dt / 1000.0 - timed.last = now -}