added year text
This commit is contained in:
parent
bb15002a38
commit
7bd9e107a2
File diff suppressed because one or more lines are too long
|
@ -85,6 +85,10 @@ export class SpiralCamera {
|
|||
return this.viewingYear;
|
||||
};
|
||||
|
||||
getAngle = () => {
|
||||
return this.angle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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();
|
|
@ -1,8 +1,10 @@
|
|||
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;
|
||||
const number = 1000;
|
||||
for (let i = 0; i <= number; i++) {
|
||||
let p = i / number;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
getText() {
|
||||
return this.text;
|
||||
}
|
||||
|
||||
};
|
Loading…
Reference in New Issue