101 lines
2.7 KiB
JavaScript
101 lines
2.7 KiB
JavaScript
import * as THREE from "three";
|
|
|
|
let isMousePressed = false
|
|
|
|
let sensetivityX = 0.5;
|
|
let sensetivityY = 1.;
|
|
let fixedAxisMovement = false;
|
|
|
|
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;
|
|
if (fixedAxisMovement) 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;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|