finished orb animation

src/components/Game.tsx

@@ -236,8 +236,8 @@ const Game = () => {
             setTimeout(() => {
               setSpriteUpdateCooldown(false);
             }, 1000);
-            break;
           }
+          break;
         // only change sprite focus
         default:
           if (!spriteUpdateCooldown) {

src/components/Hub.tsx

@@ -1,8 +1,8 @@
-import React, { Suspense, memo} from "react";
+import React, { Suspense } from "react";
-import GrayRing from "./GrayRing";
-import PurpleRing from "./PurpleRing";
-import LevelSprite from "./LevelSprite";
 import level_sprites from "../resources/level_sprites.json";
+import GrayRing from "./GrayRing";
+import LevelSprite from "./LevelSprite";
+import PurpleRing from "./PurpleRing";
 
 export type PositionAndScaleProps = [number, number, number];
 export type RotationProps = [number, number, number, (string | undefined)?];

src/components/Orb.tsx

@@ -1,53 +1,110 @@
-import React, { useRef, memo, useState } from "react";
+import React, { memo, useRef, useState } from "react";
+import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import { useUpdate, useThree, useFrame, useLoader } from "react-three-fiber";
 import orbSprite from "../static/sprites/orb.png";
 
-const curve = new THREE.QuadraticBezierCurve3(
+// initialize outside the component otherwise it gets overwritten when it rerenders
-  new THREE.Vector3(1.2, 0, 0),
-  new THREE.Vector3(0.5, -0.8, 0),
-  new THREE.Vector3(-1.2, 1, 0)
-);
-
-const points = curve.getPoints(100);
-
 let orbIdx = 0;
+let orbDirectionChangeCount = 0;
 
 const Orb = memo(() => {
   const orbRef = useRef();
   const [orbDirection, setOrbDirection] = useState("left");
-  const ref = useUpdate((geometry: any) => {
+  const [currentCurve, setCurrentCurve] = useState("first");
-    geometry.setFromPoints(points);
-  }, []);
 
   const orbSpriteTexture: any = useLoader(THREE.TextureLoader, orbSprite);
 
+  // first one goes from up to down left to right
+  const firstCurve = new THREE.QuadraticBezierCurve3(
+    new THREE.Vector3(1.2, 0, 0),
+    new THREE.Vector3(0.5, -0.8, 0),
+    new THREE.Vector3(-1.2, 1, 0)
+  );
+
+  // second one goes from down to up left to right
+  const secondCurve = new THREE.QuadraticBezierCurve3(
+    new THREE.Vector3(-1.2, -0.8, 0),
+    new THREE.Vector3(-0.5, -0.1, 0),
+    new THREE.Vector3(1.2, 0.8, 0)
+  );
+
   useFrame(() => {
-    var orbPos = curve.getPoint(orbIdx / 250);
+    let orbPosFirst = firstCurve.getPoint(orbIdx / 250);
-    if (orbPos.x < -1.4) setOrbDirection("right");
+    let orbPosSecond = secondCurve.getPoint(orbIdx / 250);
-    if (orbPos.x > 1.4) setOrbDirection("left");
+
-    if (orbDirection === "left") {
+    if (orbPosFirst.x < -1.4) {
-      orbIdx++;
+      switch (currentCurve) {
-    } else {
+        case "first":
-      orbIdx--;
+          setOrbDirection("right");
+          break;
+        case "second":
+          setOrbDirection("left");
+          break;
+      }
+      orbDirectionChangeCount++;
+    }
+
+    if (orbPosFirst.x > 1.4) {
+      switch (currentCurve) {
+        case "first":
+          setOrbDirection("left");
+          break;
+        case "second":
+          setOrbDirection("right");
+          break;
+      }
+      orbDirectionChangeCount++;
+    }
+
+    if (orbDirection === "left") {
+      switch (currentCurve) {
+        case "first":
+          orbIdx++;
+          break;
+        case "second":
+          orbIdx--;
+          break;
+      }
+    } else {
+      switch (currentCurve) {
+        case "first":
+          orbIdx--;
+          break;
+        case "second":
+          orbIdx++;
+          break;
+      }
+    }
+
+    if (orbDirectionChangeCount % 6 === 0 && orbDirectionChangeCount !== 0) {
+      orbDirectionChangeCount = 0;
+      switch (currentCurve) {
+        case "first":
+          orbIdx = 250;
+          setCurrentCurve("second");
+          break;
+        case "second":
+          orbIdx = 0;
+          setCurrentCurve("first");
+          break;
+      }
+      setOrbDirection("left");
+    }
+
+    if (currentCurve === "first") {
+      (orbRef.current as any).position.x = orbPosFirst.x;
+      (orbRef.current as any).position.y = orbPosFirst.y;
+    } else {
+      (orbRef.current as any).position.x = orbPosSecond.x;
+      (orbRef.current as any).position.y = orbPosSecond.y;
     }
-    (orbRef.current as any).position.x = orbPos.x;
-    (orbRef.current as any).position.y = orbPos.y;
   });
+
   return (
     <group position={[0, -0.1, -9]}>
-      <sprite scale={[0.3, 0.3, 0.3]} ref={orbRef}>
+      <sprite scale={[0.5, 0.5, 0.5]} ref={orbRef}>
         <spriteMaterial attach="material" map={orbSpriteTexture} />
       </sprite>
-      {/* <line>
-        <bufferGeometry attach="geometry" ref={ref} />
-        <lineBasicMaterial
-          attach="material"
-          color="blue"
-          linewidth={7}
-          transparent={false}
-        />
-      </line> */}
     </group>
   );
 });

src/components/Starfield.tsx

@@ -1,4 +1,4 @@
-import { a, Interpolation } from "@react-spring/three";
+import { Interpolation } from "@react-spring/three";
 import React, { createRef, memo, useMemo, useRef } from "react";
 import { useFrame } from "react-three-fiber";
 import * as THREE from "three";
@@ -157,7 +157,7 @@ const Starfield = memo((props: StarfieldProps) => {
   });
 
   return (
-    <a.group position={[-0.7, -1.5, -4]} >
+    <group position={[-0.7, -1.5, -4]} >
       {posesBlueFromRight.map((pos: any, idx: number) => {
         return (
           <mesh
@@ -273,7 +273,7 @@ const Starfield = memo((props: StarfieldProps) => {
           </mesh>
         );
       })}
-    </a.group>
+    </group>
   );
 });