pages/playground/playground.component.ts

0001 import {AfterViewInit, Component, OnInit, ViewChild, ElementRef} from '@angular/core';
0002 import * as THREE from "three"
0003 import * as TWEEN from '@tweenjs/tween.js';
0004
0005 @Component({
0006     selector: 'app-playground',
0007     imports: [],
0008     templateUrl: './playground.component.html',
0009     styleUrl: './playground.component.scss'
0010 })
0011 export class PlaygroundComponent implements OnInit, AfterViewInit {
0012   @ViewChild('rendererContainer') rendererContainer!: ElementRef;
0013
0014   private scene!: THREE.Scene;
0015   private camera!: THREE.PerspectiveCamera;
0016   private renderer!: THREE.WebGLRenderer;
0017   private particle1!: THREE.Mesh;
0018   private particle2!: THREE.Mesh;
0019   private lines: THREE.Line[] = [];
0020   private curves: THREE.CatmullRomCurve3[] = [];
0021   private trajectories: any[] = [
0022     [
0023       { x: 0, y: 0, z: 0, time: 1000 },
0024       { x: 1, y: 1, z: 0, time: 2000 },
0025       { x: 2, y: 0, z: 1, time: 3000 },
0026       { x: 3, y: -1, z: 0, time: 4000 },
0027       { x: 4, y: 0, z: -1, time: 5000 }
0028     ],
0029     [
0030       { x: 4, y: 0, z: -1, time: 5000 },
0031       { x: 5, y: 1, z: -1, time: 6000 },
0032       { x: 6, y: 2, z: 0, time: 7000 },
0033       { x: 7, y: 1, z: 1, time: 8000 },
0034       { x: 8, y: 0, z: 1, time: 9000 }
0035     ],
0036     [
0037       { x: 8, y: 0, z: 1, time: 5000 },
0038       { x: 9, y: -1, z: 1, time: 6000 },
0039       { x: 10, y: -2, z: 0, time: 7000 },
0040       { x: 11, y: -1, z: -1, time: 8000 },
0041       { x: 12, y: 0, z: -1, time: 9000 }
0042     ]
0043   ];
0044
0045   constructor() { }
0046
0047   ngOnInit(): void { }
0048
0049   ngAfterViewInit(): void {
0050     this.initThreeJS();
0051     this.initCurvesAndLines();
0052     this.animate();
0053   }
0054
0055   initThreeJS(): void {
0056     this.scene = new THREE.Scene();
0057     this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
0058     this.camera.position.z = 5;
0059
0060     this.renderer = new THREE.WebGLRenderer();
0061     this.renderer.setSize(window.innerWidth, window.innerHeight);
0062     this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
0063
0064     const geometry = new THREE.SphereGeometry(0.1, 32, 32);
0065     const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
0066     this.particle1 = new THREE.Mesh(geometry, material);
0067     this.particle2 = new THREE.Mesh(geometry, material);
0068     this.particle1.visible = false; // Initially invisible
0069     this.particle2.visible = false; // Initially invisible
0070     this.scene.add(this.particle1);
0071     this.scene.add(this.particle2);
0072   }
0073
0074   initCurvesAndLines(): void {
0075     this.curves = this.trajectories.map(points => {
0076       return new THREE.CatmullRomCurve3(points.map((p: { x: number; y: number; z: number }) => new THREE.Vector3(p.x, p.y, p.z)));
0077     });
0078
0079     this.curves.forEach(curve => {
0080       const linePoints = curve.getPoints(100);
0081       const lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints);
0082       const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });
0083       const line = new THREE.Line(lineGeometry, lineMaterial);
0084       line.visible = false; // Initially invisible
0085       this.scene.add(line);
0086       this.lines.push(line);
0087     });
0088   }
0089
0090   updateParticlePosition(currentTime: number): void {
0091     const delay = 1000; // Delay before the particles appear
0092     if (currentTime < delay) {
0093       this.particle1.visible = false;
0094       this.particle2.visible = false;
0095       this.lines.forEach(line => line.visible = false);
0096       return;
0097     }
0098
0099     this.particle1.visible = true;
0100     this.particle2.visible = currentTime >= 5000;
0101
0102     let adjustedTime = currentTime - delay;
0103
0104     // Track 1
0105     if (adjustedTime <= 4000) {
0106       this.lines[0].visible = true;
0107       const t1 = adjustedTime / 4000;
0108       const position1 = this.curves[0].getPoint(t1);
0109       this.particle1.position.copy(position1);
0110       const visiblePoints1 = this.curves[0].getPoints(Math.floor(t1 * 100) + 1);
0111       this.lines[0].geometry.setFromPoints(visiblePoints1);
0112     }
0113
0114     // Track 2
0115     if (adjustedTime >= 4000 && adjustedTime <= 8000) {
0116       this.lines[1].visible = true;
0117       const t2 = (adjustedTime - 4000) / 4000;
0118       const position2 = this.curves[1].getPoint(t2);
0119       this.particle1.position.copy(position2);
0120       const visiblePoints2 = this.curves[1].getPoints(Math.floor(t2 * 100) + 1);
0121       this.lines[1].geometry.setFromPoints(visiblePoints2);
0122     }
0123
0124     // Track 3 (second particle)
0125     if (adjustedTime >= 4000 && adjustedTime <= 8000) {
0126       this.lines[2].visible = true;
0127       const t3 = (adjustedTime - 4000) / 4000;
0128       const position3 = this.curves[2].getPoint(t3);
0129       this.particle2.position.copy(position3);
0130       const visiblePoints3 = this.curves[2].getPoints(Math.floor(t3 * 100) + 1);
0131       this.lines[2].geometry.setFromPoints(visiblePoints3);
0132     }
0133   }
0134
0135   setAnimationTime(event: Event): void {
0136     const input = event.target as HTMLInputElement;
0137     const value = parseInt(input.value, 10);
0138     this.updateParticlePosition(value);
0139   }
0140
0141   animate(): void {
0142     requestAnimationFrame(() => this.animate());
0143     TWEEN.update();
0144     this.renderer.render(this.scene, this.camera);
0145   }
0146 }