added year text

view/controls.js

@@ -85,6 +85,10 @@ export class SpiralCamera {
         return this.viewingYear;
     };
 
+    getAngle = () => {
+        return this.angle;
+    }
+
 }
 
 

view/graphics.js

@@ -32,14 +32,6 @@ 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
@@ -52,32 +44,14 @@ let switched = true;
 
 
 
-// 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());
+    scene.add(segments[i].getText());
 }
 
 addEventListener("changedViewYear", (e) => {
@@ -87,22 +61,25 @@ addEventListener("changedViewYear", (e) => {
 
     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)) {
@@ -113,6 +90,10 @@ function animate() {
 
     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);
@@ -133,9 +114,4 @@ function resizeRendererToDisplaySize(renderer) {
     return needResize;
 }
 
-const rebuildSpiral = () => {
-    segments = [];
-
-}
-
 animate();

view/spiral.js

@@ -1,9 +1,11 @@
 import * as THREE from 'three';
+import { FontLoader } from 'three/addons/loaders/FontLoader.js';
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-export const calculateGeometry = (spiralHeight) => {
+const calculateSpiralGeometry = (spiralHeight) => {
     let pointsOfCurve = [];
-    const number = 100;
-    for (let i = 0; i <= number; i ++) {
+    const number = 1000;
+    for (let i = 0; i <= number; i++) {
         let p = i / number;
 
         let x = Math.cos(p * 2 * Math.PI);
@@ -14,19 +16,53 @@ export const calculateGeometry = (spiralHeight) => {
     }
 
     let curve = new THREE.CatmullRomCurve3(pointsOfCurve);
-    return new THREE.TubeGeometry(curve, 400, 0.1, 400, false);
-}
+    return new THREE.TubeGeometry(curve, 400, 0.1, 900, false);
+};
 
-const geom = calculateGeometry(2)
+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)
 
 export class SpiralSegment {
     constructor(year, height, material) {
         this.year = year;
-        this.segment = new THREE.Mesh(geom, material);
-        // this.segment.position.y += number * height;
+        this.segment = new THREE.Mesh(spiralGeometry, material);
+        this.text = new THREE.Mesh(calculateTextGeometry(`${this.year}`), material);
     }
 
-    getSegment() { 
-        return this.segment; 
+    getSegment() {
+        return this.segment;
     }
-}
+
+    getText() {
+        return this.text;
+    }
+
+};