spiral_calendar/view/graphics.js

import * as THREE from 'three';
import { SpiralSegment } from './spiral.js';
import { SpiralCamera } from './controls.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';

const segmentHeight = 2;

let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f });
let distance = 5;

const scene = new THREE.Scene();

var canvas = document.querySelector('#canvas');
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
document.body.appendChild(renderer.domElement);

const camera = (new SpiralCamera(canvas, segmentHeight));

// setting light
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(0, 0, 1);

const ambientLight = new THREE.AmbientLight(0xffffff, 10);

scene.add(pointLight);
scene.add(ambientLight);

let segments = [];
let viewingYear = new Date().getFullYear();
let viewDistance = 5;
let verticalOffset = 0;
let switched = true;

// let text = document.createElement('div');
// text.style.position = 'absolute'
// text.style.width = 100
// text.style.height = 100
// text.style.color = "white"
// text.innerHTML = "test"
// text.style.top = 200 + 'px'
// text.style.left = 200 + 'px'
// document.body.appendChild(text)





for (let i = 0; i < viewDistance * 2 + 1; i++) {
    let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`;
    let material = new THREE.MeshPhongMaterial({ color: color });
    segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, material));
    scene.add(segments[i].getSegment());
    scene.add(segments[i].getText());
}

addEventListener("changedViewYear", (e) => {
    let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`;
    let material = new THREE.MeshPhongMaterial({ color: color });
    let newYear = camera.getViewingYear();

    if (newYear > viewingYear) { // +
        scene.remove(segments[0].getSegment())
        scene.remove(segments[0].getText())
        for (let i = 0; i < segments.length; i++) {
            if (i < segments.length - 1) segments[i] = segments[i + 1]
            else segments[i] = new SpiralSegment(newYear + viewDistance, segmentHeight, material);
        }
        scene.add(segments[segments.length - 1].getSegment());
        scene.add(segments[segments.length - 1].getText());
    } else {
        scene.remove(segments[segments.length - 1].getSegment())
        scene.remove(segments[segments.length - 1].getText())
        segments.pop();
        segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material))
        scene.add(segments[0].getSegment());
        scene.add(segments[0].getText());
    }

    viewingYear = newYear;
});

//main loop
function animate() {
    if (resizeRendererToDisplaySize(renderer)) {
        const canvas = renderer.domElement;
        camera.getCamera().aspect = canvas.clientWidth / canvas.clientHeight;
        camera.getCamera().updateProjectionMatrix();
    }

    for (let i = 0; i < segments.length; i++) {
        segments[i].getSegment().position.y = ((segments[i].year - camera.getViewingYear()) * segmentHeight + camera.getOffset());
        segments[i].getText().position.y = segmentHeight / 2 +(segments[i].year - camera.getViewingYear()) * segmentHeight + camera.getOffset();
        segments[i].getText().position.x = Math.cos(THREE.MathUtils.degToRad(camera.getAngle() + 90)) * 3
        segments[i].getText().position.z = Math.sin(THREE.MathUtils.degToRad(camera.getAngle() + 90)) * 3
        segments[i].getText().lookAt(camera.getCamera().position)
    }

    camera.getCamera().lookAt(0, 0, 0);

    renderer.render(scene, camera.getCamera());

    requestAnimationFrame(animate);
}

function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;

    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) renderer.setSize(width, height, false);

    return needResize;
}

animate();