app/utils/eic-animation-manager.ts

0001 import { Easing, Tween } from '@tweenjs/tween.js';
0002 import {
0003   Scene,
0004   Camera,
0005   WebGLRenderer,
0006   Vector3,
0007   Color,
0008   MeshBasicMaterial,
0009   Mesh,
0010   SphereGeometry,
0011   Group
0012 } from 'three';
0013
0014 /**
0015  * Example interface for presets
0016  */
0017 export interface AnimationPreset {
0018   positions: { position: number[]; duration: number; easing?: any }[];
0019   animateEventAfterInterval?: number;
0020   collisionDuration?: number;
0021   name: string;
0022 }
0023
0024 export class EicAnimationsManager {
0025   constructor(
0026     private scene: Scene,
0027     private camera: Camera,
0028     private renderer: WebGLRenderer
0029   ) {}
0030
0031   /**
0032    * Example: Animate collision of two spheres, then run an event expansion.
0033    */
0034   public collideParticles(
0035     tweenDuration: number,
0036     particleSize: number = 10,
0037     distanceFromOrigin: number = 5000,
0038     particleColor: Color = new Color(0xffffff),
0039     onEnd?: () => void
0040   ) {
0041     const electronMat = new MeshBasicMaterial({ color: 0x0000ff, transparent: true, opacity: 0 });
0042     const electron = new Mesh(new SphereGeometry(particleSize), electronMat);
0043     electron.position.set(0, 0, distanceFromOrigin);
0044
0045     const ionMat = new MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0 });
0046     const ion = new Mesh(new SphereGeometry(particleSize * 1.5), ionMat);
0047     ion.position.set(0, 0, -distanceFromOrigin);
0048
0049     this.scene.add(electron, ion);
0050
0051     // fade in
0052     new Tween(electronMat).to({ opacity: 1 }, 300).start();
0053     new Tween(ionMat).to({ opacity: 1 }, 300).start();
0054
0055     // move to center
0056     const electronTween = new Tween(electron.position).to({ z: 0 }, tweenDuration).start();
0057     const ionTween = new Tween(ion.position).to({ z: 0 }, tweenDuration).start();
0058
0059     ionTween.onComplete(() => {
0060       this.scene.remove(electron, ion);
0061       onEnd?.();
0062     });
0063   }
0064
0065   /**
0066    * Example: Animate "EventData" group expansions, etc.
0067    */
0068   public animateEvent(tweenDuration: number, onEnd?: () => void) {
0069     const eventDataGroup = this.scene.getObjectByName('EventData') as Group;
0070     if (!eventDataGroup) {
0071       console.warn('No EventData group found in scene!');
0072       return;
0073     }
0074     // Example: fade in, or set drawRange, etc.
0075     eventDataGroup.traverse((obj3d: any) => {
0076       if (obj3d.material && obj3d.geometry) {
0077         // example: from 0 to full drawRange
0078         if (obj3d.geometry.drawRange) {
0079           obj3d.geometry.setDrawRange(0, 0);
0080           new Tween(obj3d.geometry.drawRange)
0081             .to({ count: obj3d.geometry.attributes.position.count }, tweenDuration)
0082             .onComplete(() => {
0083               // done
0084             })
0085             .start();
0086         }
0087       }
0088     });
0089     // Fire onEnd at some point:
0090     setTimeout(() => {
0091       onEnd?.();
0092     }, tweenDuration + 500);
0093   }
0094 }