diff --git a/view/controls.js b/view/controls.js index 214ca2f..6e2d75a 100644 --- a/view/controls.js +++ b/view/controls.js @@ -7,7 +7,7 @@ export class SpiralCamera { // this.camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); this.camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); this.angle = 90; - this.distance = 5; + this.distance = 10; this.canvas = canvas this.offset = 0; this.segmentHeight = segmentHeight; @@ -33,6 +33,7 @@ export class SpiralCamera { if (isMousePressed) { let horizontal = event.movementX; let vertical = event.movementY; + Math.abs(horizontal) > Math.abs(vertical)? vertical = 0 : horizontal = 0; this.updateCameraPosition(horizontal, vertical); } }); diff --git a/view/graphics.js b/view/graphics.js index abd1e30..f81686d 100644 --- a/view/graphics.js +++ b/view/graphics.js @@ -7,7 +7,6 @@ import { FontLoader } from 'three/addons/loaders/FontLoader.js'; const segmentHeight = 2; let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f }); -let distance = 5; const scene = new THREE.Scene(); @@ -28,7 +27,7 @@ scene.add(ambientLight); let segments = []; let viewingYear = new Date().getFullYear(); -let viewDistance = 5; +let viewDistance = 15; let verticalOffset = 0; let switched = true; @@ -42,10 +41,6 @@ let switched = true; // 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 }); @@ -54,25 +49,33 @@ for (let i = 0; i < viewDistance * 2 + 1; i++) { scene.add(segments[i].getText()); } +const colors = ["#ff0000", "#ffa500", "#ffff00", "#00ff00", "#0000ff", "#00ffff", "#800080"] + addEventListener("changedViewYear", (e) => { - let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`; - let material = new THREE.MeshPhongMaterial({ color: color }); let newYear = camera.getViewingYear(); if (newYear > viewingYear) { // + + let color = colors[(colors.length - 1) - ((newYear + viewDistance) % colors.length)] + let material = new THREE.MeshBasicMaterial({ color: color }); + 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); - } + + 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 { + } else { + let color = colors[(colors.length - 1) - ((newYear - viewDistance) % colors.length)] + let material = new THREE.MeshBasicMaterial({ color: color }); + 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()); } @@ -91,8 +94,8 @@ 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().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) } diff --git a/view/spiral.js b/view/spiral.js index 0dad9f8..caea009 100644 --- a/view/spiral.js +++ b/view/spiral.js @@ -8,9 +8,9 @@ const calculateSpiralGeometry = (spiralHeight) => { for (let i = 0; i <= number; i++) { let p = i / number; - let x = Math.cos(p * 2 * Math.PI); - let y = p * spiralHeight; - let z = Math.sin(p * 2 * Math.PI); + 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)); }