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