orb moves in 3d inifinity shape now, added keys to gray planes.

src/components/GrayPlanes/GrayPlanes.tsx

@@ -1,9 +1,17 @@
-import React, { createRef, memo, RefObject, useRef } from "react";
+import React, {
+  createRef,
+  memo,
+  MutableRefObject,
+  Ref,
+  RefObject,
+  useRef,
+} from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
 import { useSpring, a } from "@react-spring/three";
 import { useRecoilValue } from "recoil";
 import { grayPlanesPosYAtom, grayPlanesVisibleAtom } from "./GrayPlanesAtom";
+import { Object3D } from "three";
 
 const GrayPlanes = memo(() => {
   const grayPlaneGroupRef = useRef<THREE.Object3D>();
@@ -51,6 +59,7 @@ const GrayPlanes = memo(() => {
             scale={[0.04, 10, 0.04]}
             position={grayPlanePoses[idx] as [number, number, number]}
             ref={ref}
+            key={idx}
           >
             <planeBufferGeometry attach="geometry" />
             <meshBasicMaterial

src/components/GrayPlanes/GrayPlanesAtom.tsx

@@ -2,7 +2,7 @@ import { atom } from "recoil";
 
 export const grayPlanesPosYAtom = atom({
   key: "grayPlanesPosYAtom",
-  default: -1,
+  default: 0,
 });
 
 export const grayPlanesVisibleAtom = atom({

src/components/InputHandler.tsx

@@ -137,8 +137,10 @@ const InputHandler = () => {
 
       // wait for the anim to finish, set lain to standing state, release the move lock
       setTimeout(() => {
-        setLainMoving(false);
         setLainMoveState(<LainStanding />);
+        setTimeout(() => {
+          setLainMoving(false);
+        }, 300);
       }, (lain_animations as LainAnimations)[key]["duration"]);
     },
     [moveCamera, rotateCamera, setLainMoveState, setLainMoving]

src/components/MainScene/MainSceneIntro.tsx

@@ -77,6 +77,9 @@ const MainSceneIntro = memo(() => {
       }, 300);
     }, 3860);
   }, [
+    setGrayPlanesVisible,
+    setMainStarfieldBoostVal,
+    setMainStarfieldVisible,
     setHudVisible,
     setOrbVisible,
     setIntroStarfieldVisible,

src/components/Orb/Orb.tsx

@@ -6,6 +6,7 @@ import orbSprite from "../../static/sprites/orb.png";
 // initialize outside the component otherwise it gets overwritten when it rerenders
 let orbIdx = 0;
 let orbDirectionChangeCount = 0;
+let renderOrder = -1;
 
 type OrbProps = {
   orbVisibility: boolean;
@@ -41,6 +42,7 @@ const Orb = memo((props: OrbProps) => {
         switch (currentCurve) {
           case "first":
             setOrbDirection("right");
+            renderOrder = 0;
             break;
           case "second":
             setOrbDirection("left");
@@ -56,6 +58,7 @@ const Orb = memo((props: OrbProps) => {
             break;
           case "second":
             setOrbDirection("right");
+            renderOrder = -1;
             break;
         }
         orbDirectionChangeCount++;
@@ -108,8 +111,13 @@ const Orb = memo((props: OrbProps) => {
 
   return (
     <group position={[0, -0.1, -9]} visible={props.orbVisibility}>
-      <sprite scale={[0.5, 0.5, 0.5]} ref={orbRef}>
-        <spriteMaterial attach="material" map={orbSpriteTexture} />
+      <sprite scale={[0.5, 0.5, 0.5]} ref={orbRef} renderOrder={renderOrder}>
+        <spriteMaterial
+          attach="material"
+          map={orbSpriteTexture}
+          depthTest={false}
+          transparent={true}
+        />
       </sprite>
     </group>
   );

src/components/Starfield/Starfield.tsx

@@ -206,7 +206,7 @@ const Starfield = memo(() => {
               posRef.current!.position.z = el[1][idx][2] - 0.5;
             } else {
               posRef.current!.position.x +=
-                0.03 + starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
+                0.03 + starSpeeds[idx] +starfieldState.starfieldBoostVal.get();
               posRef.current!.position.z +=
                 0.015 + starfieldState.starfieldBoostVal.get() * 0.5;
             }