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;
|
return this.viewingYear;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
getAngle = () => {
|
||||||
|
return this.angle;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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();
|
|
@ -1,9 +1,11 @@
|
||||||
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;
|
||||||
|
|
||||||
let x = Math.cos(p * 2 * Math.PI);
|
let x = Math.cos(p * 2 * Math.PI);
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
Loading…
Reference in New Issue