69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
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 = 1; 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, 200, 0.1, 200, 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;
|
|
}
|
|
|
|
}; |