spiral_calendar/view/spiral.js

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

const calculateSpiralGeometry = (spiralHeight) => {
    let pointsOfCurve = [];
    const number = 1000;
    for (let i = 0; i <= number; i++) {
        let p = i / number;

        let x = 5*Math.cos(p * 2 * Math.PI);
        let y = 1 * p * spiralHeight;
        let z = 5*Math.sin(p * 2 * Math.PI);

        pointsOfCurve.push(new THREE.Vector3(x, y, z));
    }

    let curve = new THREE.CatmullRomCurve3(pointsOfCurve);
    return new THREE.TubeGeometry(curve, 400, 0.1, 900, false);
};

const loader = new FontLoader();

const loadFont = () => {
    let resolve, reject;
    let promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
    });
    loader.load('fonts/helvetiker_regular.typeface.json', (font) => {
        resolve(font);
    }, () => {}, (error) => {reject(error)})
    return promise;
};

const font = await loadFont();
const calculateTextGeometry = (string) => {
    return new TextGeometry(string, {
        font,
        size: 0.5,
        height: 0.2,
        curveSegments: 6,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 4
    });
};

const spiralGeometry = calculateSpiralGeometry(2)
// spiralGeometry.setAttribute('position', new THREE.BufferAttribute( linePositions, 3 ));

export class SpiralSegment {
    constructor(year, height, material) {
        this.year = year;
        this.segment = new THREE.Mesh(spiralGeometry, material);
        this.text = new THREE.Mesh(calculateTextGeometry(`${this.year}`), material);
    }

    getSegment() {
        return this.segment;
    }

    getText() {
        return this.text;
    }

};