spiral_calendar/view/controls.js

import * as THREE from "three";

let isMousePressed = 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 = 0;
        this.distance = 5;
        this.canvas = canvas
        this.offset = 0;
        this.segmentHeight = segmentHeight;
        this.viewingYear = new Date().getFullYear();

        console.log(this.canvas)

        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;
                this.updateCameraPosition(horizontal, vertical);
            }
        });

        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;
    }

}