Use ThreeAnimator to animate galaxy and clouds

src/planet/continents/common/util/continent-interactor.ts

@@ -122,10 +122,10 @@ export class ContinentInteractor<T extends BaseContinent> {
     // Animate and Apply Changes
 
     const camera = this.three.getControls().getCamera();
-    const threeAnimations = this.three.getAnimator();
+    const threeAnimator = this.three.getAnimator();
 
     [camera, this.sun].forEach((object) => {
-      threeAnimations.animateObjectToTarget(
+      threeAnimator.animateObjectToTarget(
         object,
         targetCameraTransform.position,
         targetCameraTransform.quaternion,

src/planet/objects/clouds.ts

@@ -1,5 +1,5 @@
-import { Tween } from '@tweenjs/tween.js';
 import { Group, Object3D } from 'three';
+import { ThreeAnimator } from '../../three/animator';
 import { generateRandomInRange } from '../common/util/random-numbers';
 import { BaseObject } from './base-object';
 import { Cloud } from './cloud';
@@ -29,22 +29,28 @@ export class Clouds extends BaseObject<CloudsProperties> {
    * However, that animation isn't as good as this one which uses
    * rotation. See commit 2c96c7924f140142db049373306721a6df105965.
    */
-  public animateClouds() {
+  public animateClouds(threeAnimator: ThreeAnimator) {
     const clouds = this.object;
     const singleIntervalDuration = 1000;
     const deltaX = generateRandomInRange(0, 100) * 0.001;
     const deltaY = generateRandomInRange(0, 100) * 0.001;
     const deltaZ = generateRandomInRange(0, 100) * 0.001;
 
     const animateClouds = (clouds: Object3D) => {
-      const cloudTween = new Tween(clouds.rotation);
       const { x, y, z } = clouds.rotation;
+      const targetRotation = { x: x + deltaX, y: y + deltaY, z: z + deltaZ };
 
-      cloudTween.to({ x: x + deltaX, y: y + deltaY, z: z + deltaZ });
-      cloudTween.duration(singleIntervalDuration);
+      const cloudTween = threeAnimator.createTween(
+        clouds.rotation,
+        targetRotation,
+        { duration: singleIntervalDuration },
+      );
       cloudTween.start();
 
-      cloudTween.onComplete(() => animateClouds(clouds));
+      cloudTween.onComplete(() => {
+        threeAnimator.removeTween(cloudTween);
+        animateClouds(clouds);
+      });
     };
 
     animateClouds(clouds);

src/planet/objects/galaxy.ts

@@ -1,4 +1,3 @@
-import { Tween } from '@tweenjs/tween.js';
 import {
   BufferGeometry,
   Float32BufferAttribute,
@@ -10,6 +9,7 @@ import {
   Texture,
   Vector3,
 } from 'three';
+import { ThreeAnimator } from '../../three/animator';
 import { colors } from '../common/lib/colors';
 import { BaseObject } from './base-object';
 
@@ -97,7 +97,7 @@ export class Galaxy extends BaseObject<GalaxyProperties> {
     return texture;
   }
 
-  public animateGalaxy() {
+  public animateGalaxy(threeAnimator: ThreeAnimator) {
     const starsGroups = this.object.children;
     const movementFactor = 0.02;
     const singleIntervalDuration = 1000;
@@ -106,13 +106,19 @@ export class Galaxy extends BaseObject<GalaxyProperties> {
     // restarts using recursion every 1000 ms. `delta` decides if the
     // group rotates to the right (+y) or left (-y).
     const animateStarsGroup = (group: Object3D, delta = 1) => {
-      const starsTween = new Tween(group.rotation);
+      const targetRotation = { y: group.rotation.y + movementFactor * delta };
 
-      starsTween.to({ y: group.rotation.y + movementFactor * delta });
-      starsTween.duration(singleIntervalDuration);
+      const starsTween = threeAnimator.createTween(
+        group.rotation,
+        targetRotation,
+        { duration: singleIntervalDuration },
+      );
       starsTween.start();
 
-      starsTween.onComplete(() => animateStarsGroup(group, delta));
+      starsTween.onComplete(() => {
+        threeAnimator.removeTween(starsTween);
+        animateStarsGroup(group, delta);
+      });
     };
 
     for (let i = 0; i < starsGroups.length; i++) {

src/planet/planet.ts

@@ -89,7 +89,7 @@ export class Planet {
       startRadius: starsStartRadius,
       endRadius: starsEndRadius,
     });
-    galaxy.animateGalaxy();
+    galaxy.animateGalaxy(this.getAnimator());
     enableParallax(galaxy.getObject(), 0.075);
     galaxy.addTo(scene);
 
@@ -100,7 +100,7 @@ export class Planet {
       orbitRadius: globeRadius + 40,
       baseCloudSize: 15,
     });
-    clouds.animateClouds();
+    clouds.animateClouds(this.getAnimator());
     clouds.addTo(planet);
 
     // Continents

src/three/animator.ts

@@ -1,4 +1,4 @@
-import { Easing, Tween, update as tweenUpdate } from '@tweenjs/tween.js';
+import { Easing, Group, Tween } from '@tweenjs/tween.js';
 import { Object3D, Quaternion, Vector3 } from 'three';
 import { IUpdatable } from './common/lib/iupdatable';
 
@@ -8,8 +8,14 @@ export type TweenOptions = {
 };
 
 export class ThreeAnimator implements IUpdatable {
+  private tweenGroup: Group;
+
+  constructor() {
+    this.tweenGroup = new Group();
+  }
+
   public update() {
-    tweenUpdate();
+    this.tweenGroup.update();
   }
 
   public animateObjectToTarget(
@@ -35,18 +41,26 @@ export class ThreeAnimator implements IUpdatable {
 
       tween.start();
     });
+
+    this.tweenGroup.add(...tweens);
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public createTween<T extends Record<string, any>>(
     from: T,
-    to: T,
+    to: Partial<T>,
     tweenOptions?: TweenOptions,
   ) {
     const tween = new Tween(from).to(to);
     tweenOptions?.duration && tween.duration(tweenOptions.duration);
     tweenOptions?.easing && tween.easing(tweenOptions.easing);
 
+    this.tweenGroup.add(tween);
+
     return tween;
   }
+
+  public removeTween(tween: Tween) {
+    this.tweenGroup.remove(tween);
+  }
 }