added year text

This commit is contained in:
leca 2023-12-07 12:56:12 +03:00
parent bb15002a38
commit 7bd9e107a2
4 changed files with 61 additions and 44 deletions

File diff suppressed because one or more lines are too long

4
view/controls.js vendored
View File

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

View File

@ -32,14 +32,6 @@ let viewDistance = 5;
let verticalOffset = 0; let verticalOffset = 0;
let switched = true; 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'); // let text = document.createElement('div');
// text.style.position = 'absolute' // text.style.position = 'absolute'
// text.style.width = 100 // 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++) { for (let i = 0; i < viewDistance * 2 + 1; i++) {
let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`; let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`;
let material = new THREE.MeshPhongMaterial({ color: color }); let material = new THREE.MeshPhongMaterial({ color: color });
segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, material)); segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, material));
scene.add(segments[i].getSegment()); scene.add(segments[i].getSegment());
scene.add(segments[i].getText());
} }
addEventListener("changedViewYear", (e) => { addEventListener("changedViewYear", (e) => {
@ -87,22 +61,25 @@ addEventListener("changedViewYear", (e) => {
if (newYear > viewingYear) { // + if (newYear > viewingYear) { // +
scene.remove(segments[0].getSegment()) scene.remove(segments[0].getSegment())
scene.remove(segments[0].getText())
for (let i = 0; i < segments.length; i++) { for (let i = 0; i < segments.length; i++) {
if (i < segments.length - 1) segments[i] = segments[i + 1] if (i < segments.length - 1) segments[i] = segments[i + 1]
else segments[i] = new SpiralSegment(newYear + viewDistance, segmentHeight, material); else segments[i] = new SpiralSegment(newYear + viewDistance, segmentHeight, material);
} }
scene.add(segments[segments.length - 1].getSegment()); scene.add(segments[segments.length - 1].getSegment());
scene.add(segments[segments.length - 1].getText());
} else { } else {
scene.remove(segments[segments.length - 1].getSegment()) scene.remove(segments[segments.length - 1].getSegment())
scene.remove(segments[segments.length - 1].getText())
segments.pop(); segments.pop();
segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material)) segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material))
scene.add(segments[0].getSegment()); scene.add(segments[0].getSegment());
scene.add(segments[0].getText());
} }
viewingYear = newYear; viewingYear = newYear;
}); });
//main loop //main loop
function animate() { function animate() {
if (resizeRendererToDisplaySize(renderer)) { if (resizeRendererToDisplaySize(renderer)) {
@ -113,6 +90,10 @@ function animate() {
for (let i = 0; i < segments.length; i++) { for (let i = 0; i < segments.length; i++) {
segments[i].getSegment().position.y = ((segments[i].year - camera.getViewingYear()) * segmentHeight + camera.getOffset()); 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); camera.getCamera().lookAt(0, 0, 0);
@ -133,9 +114,4 @@ function resizeRendererToDisplaySize(renderer) {
return needResize; return needResize;
} }
const rebuildSpiral = () => {
segments = [];
}
animate(); animate();

View File

@ -1,8 +1,10 @@
import * as THREE from 'three'; 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 = []; let pointsOfCurve = [];
const number = 100; const number = 1000;
for (let i = 0; i <= number; i++) { for (let i = 0; i <= number; i++) {
let p = i / number; let p = i / number;
@ -14,19 +16,53 @@ export const calculateGeometry = (spiralHeight) => {
} }
let curve = new THREE.CatmullRomCurve3(pointsOfCurve); 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 { export class SpiralSegment {
constructor(year, height, material) { constructor(year, height, material) {
this.year = year; this.year = year;
this.segment = new THREE.Mesh(geom, material); this.segment = new THREE.Mesh(spiralGeometry, material);
// this.segment.position.y += number * height; this.text = new THREE.Mesh(calculateTextGeometry(`${this.year}`), material);
} }
getSegment() { getSegment() {
return this.segment; return this.segment;
} }
getText() {
return this.text;
} }
};