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;

// for (let i = 0; i < 40; i ++) {
//     let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`;
//     let material = new THREE.MeshPhongMaterial({color: color});
//     segments.push(new SpiralSegment(0, i - 20, spiralHeight, material).getSegment());
//     scene.add(segments[i]);
// }


// 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)



// const loader = new FontLoader();

// loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

// 	const geometry = new TextGeometry('Hello three.js!', {
// 		font: font,
// 		size: 80,
// 		height: 5,
// 		curveSegments: 12,
// 		bevelEnabled: true,
// 		bevelThickness: 10,
// 		bevelSize: 8,
// 		bevelOffset: 0,
// 		bevelSegments: 5
// 	});

//     const textmesh = new THREE.Mesh(geometry, spiralMaterial);
//     // textmesh.scale = new THREE.Vector3(2, 2, 2)
//     scene.add(textmesh)
// } );

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

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())
        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());
    } else {
        scene.remove(segments[segments.length - 1].getSegment())
        segments.pop();
        segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material))
        scene.add(segments[0].getSegment());
    }

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

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

const rebuildSpiral = () => {
    segments = [];

}

animate();