135 lines
4.6 KiB
JavaScript
135 lines
4.6 KiB
JavaScript
import * as THREE from 'three';
|
|
import { SpiralSegment } from './spiral.js';
|
|
import { SpiralCamera } from './controls.js';
|
|
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
|
|
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
|
|
|
|
const segmentHeight = 2;
|
|
|
|
// let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f });
|
|
const spiralMaterial = new THREE.ShaderMaterial( {
|
|
|
|
uniforms: {
|
|
time: { value: 1.0 },
|
|
resolution: { value: new THREE.Vector2() },
|
|
position: new THREE.Vector3()
|
|
},
|
|
|
|
vertexShader: document.getElementById( 'vertexShader' ).textContent,
|
|
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
|
|
|
|
} );
|
|
|
|
const scene = new THREE.Scene();
|
|
|
|
var canvas = document.querySelector('#canvas');
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
const camera = (new SpiralCamera(canvas, segmentHeight));
|
|
|
|
// setting light
|
|
const pointLight = new THREE.PointLight(0xffffff, 1);
|
|
pointLight.position.set(0, 0, 1);
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 10);
|
|
|
|
scene.add(pointLight);
|
|
scene.add(ambientLight);
|
|
|
|
let segments = [];
|
|
let viewingYear = new Date().getFullYear();
|
|
let viewDistance = 15;
|
|
let verticalOffset = 0;
|
|
let switched = true;
|
|
|
|
// let text = document.createElement('div');
|
|
// text.style.position = 'absolute'
|
|
// text.style.width = 100
|
|
// text.style.height = 100
|
|
// text.style.color = "white"
|
|
// text.innerHTML = "test"
|
|
// text.style.top = 200 + 'px'
|
|
// text.style.left = 200 + 'px'
|
|
// document.body.appendChild(text)
|
|
|
|
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 });
|
|
let material = spiralMaterial;
|
|
segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, material));
|
|
scene.add(segments[i].getSegment());
|
|
scene.add(segments[i].getText());
|
|
}
|
|
|
|
const colors = ["#ff0000", "#ffa500", "#ffff00", "#00ff00", "#0000ff", "#00ffff", "#800080"]
|
|
|
|
addEventListener("changedViewYear", (e) => {
|
|
let newYear = camera.getViewingYear();
|
|
|
|
if (newYear > viewingYear) { // +
|
|
// let color = colors[(colors.length - 1) - ((newYear + viewDistance) % colors.length)]
|
|
// let material = new THREE.MeshBasicMaterial({ color: color });
|
|
let material = spiralMaterial;
|
|
|
|
scene.remove(segments[0].getSegment())
|
|
scene.remove(segments[0].getText())
|
|
|
|
segments.shift();
|
|
segments.push(new SpiralSegment(newYear + viewDistance, segmentHeight, material));
|
|
|
|
scene.add(segments[segments.length - 1].getSegment());
|
|
scene.add(segments[segments.length - 1].getText());
|
|
} else {
|
|
// let color = colors[(colors.length - 1) - ((newYear - viewDistance) % colors.length)]
|
|
// let material = new THREE.MeshBasicMaterial({ color: color });
|
|
let material = spiralMaterial;
|
|
|
|
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)) {
|
|
const canvas = renderer.domElement;
|
|
camera.getCamera().aspect = canvas.clientWidth / canvas.clientHeight;
|
|
camera.getCamera().updateProjectionMatrix();
|
|
}
|
|
|
|
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 = 2.5*Math.cos(THREE.MathUtils.degToRad(camera.getAngle() + 90)) * 3
|
|
segments[i].getText().position.z = 2.5*Math.sin(THREE.MathUtils.degToRad(camera.getAngle() + 90)) * 3
|
|
segments[i].getText().lookAt(camera.getCamera().position)
|
|
}
|
|
|
|
camera.getCamera().lookAt(0, 0, 0);
|
|
|
|
renderer.render(scene, camera.getCamera());
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
function resizeRendererToDisplaySize(renderer) {
|
|
const canvas = renderer.domElement;
|
|
const width = canvas.clientWidth;
|
|
const height = canvas.clientHeight;
|
|
|
|
const needResize = canvas.width !== width || canvas.height !== height;
|
|
if (needResize) renderer.setSize(width, height, false);
|
|
|
|
return needResize;
|
|
}
|
|
|
|
animate(); |