import * as THREE from "three"; let isMousePressed = false let sensetivityX = 0.5; let sensetivityY = 1.; export class SpiralCamera { constructor(canvas, segmentHeight) { // this.camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); this.camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); this.angle = 90; this.distance = 10; this.canvas = canvas this.offset = 0; this.segmentHeight = segmentHeight; this.viewingYear = new Date().getFullYear(); this.camera.position.z = this.distance; addEventListener('mousedown', (event) => { if (event.button == 0) { isMousePressed = true; } }); addEventListener('mouseup', (event) => { if (event.button == 0) { isMousePressed = false; } }); addEventListener('mousemove', (event) => { if (isMousePressed) { let horizontal = event.movementX; let vertical = event.movementY; Math.abs(horizontal) > Math.abs(vertical)? vertical = 0 : horizontal = 0; this.updateCameraPosition(horizontal * sensetivityX, vertical * sensetivityY); } }); addEventListener('wheel', (event) => { this.distance += this.distance / (event.deltaY / 60); this.updateCameraPosition(0, 0); }); this.changedViewingYear = new CustomEvent("changedViewYear", {}); } updateCameraPosition = (horizontal, vertical) => { let ratio = 4 * Math.PI / this.canvas.width; let alpha = (360 * (horizontal * ratio / (2 * Math.PI))); let betta = THREE.MathUtils.degToRad(this.angle); let z = Math.sin(betta) * this.distance; let x = Math.cos(betta) * this.distance; this.offset -= vertical * ratio if (this.offset > this.segmentHeight) { this.offset = 0; this.viewingYear--; dispatchEvent(this.changedViewingYear) } if (this.offset < 0) { this.offset = this.segmentHeight; this.viewingYear++; dispatchEvent(this.changedViewingYear) } this.camera.position.x = x; this.camera.position.z = z; this.angle += alpha; }; getCamera = () => { return this.camera; }; getOffset = () => { return this.offset; }; getViewingYear = () => { return this.viewingYear; }; getAngle = () => { return this.angle; } }