fixed main scene bg and starfield

src/components/MainScene/HUD.tsx

@@ -1,15 +1,15 @@
-import React, {memo, useEffect, useRef} from "react";
-import {useFrame, useLoader} from "react-three-fiber";
+import React, { memo, useEffect, useRef } from "react";
+import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import bigHud from "../../static/sprite/big_hud.png";
 import longHud from "../../static/sprite/long_hud.png";
 import boringHud from "../../static/sprite/long_hud_boring.png";
-import {useStore} from "../../store";
+import { useStore } from "../../store";
 import lerp from "../../utils/lerp";
 import GreenTextRenderer from "../TextRenderer/GreenTextRenderer";
 import usePrevious from "../../hooks/usePrevious";
-import {getNodeHud} from "../../helpers/node-helpers";
-import {HUDData} from "../../types/types";
+import { getNodeHud } from "../../helpers/node-helpers";
+import { HUDData } from "../../types/types";
 
 const HUD = memo(() => {
   const activeRef = useRef(true);

src/components/MainScene/Site/MainSceneBackground.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import mainSceneBg from "../../../static/sprite/main_scene_background.png";
+import { useLoader } from "react-three-fiber";
+import * as THREE from "three";
+
+const MainSceneBackground = () => {
+  const mainSceneBgTex = useLoader(THREE.TextureLoader, mainSceneBg);
+
+  return (
+    <mesh renderOrder={-5} scale={[5, 1, 0]}>
+      <planeBufferGeometry attach="geometry" />
+      <meshBasicMaterial
+        attach="material"
+        map={mainSceneBgTex}
+        depthTest={false}
+      />
+    </mesh>
+  );
+};
+
+export default MainSceneBackground;

src/components/MainScene/Site/Site.tsx

@@ -67,7 +67,7 @@ const Site = (props: SiteProps) => {
   );
 
   return (
-    <Suspense fallback={null}>
+    <Suspense fallback={props.introFinished ? <Loading /> : null}>
       <a.group rotation-x={rotXState.x}>
         <a.group rotation-y={rotYState.y} position-y={posState.y}>
           <ActiveLevelNodes visibleNodes={visibleNodes} />

src/components/MainScene/Starfield/Starfield.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useRef, useState } from "react";
+import React, { memo, useMemo } from "react";
 import Star from "./Star";
 import IntroStar from "./IntroStar";
 

src/scenes/ChangeDiscScene.tsx

@@ -7,6 +7,7 @@ const ChangeDiscScene = () => {
 
   useEffect(() => {
     if (activeSite === "a") {
+      // todo actually rip the assets from the original
       document.getElementsByTagName("canvas")[0].className =
         "change-disc-scene-a-background";
     } else if (activeSite === "b") {
@@ -15,11 +16,6 @@ const ChangeDiscScene = () => {
     }
 
     setTimeout(() => setScene("main"), 3500);
-
-    return () => {
-      document.getElementsByTagName("canvas")[0].className =
-        "main-scene-background";
-    };
   }, [activeSite, setScene]);
 
   return <></>;

src/scenes/MainScene.tsx

@@ -17,6 +17,8 @@ import Popups from "../components/MainScene/Popups/Popups";
 import * as audio from "../static/audio/sfx";
 import Loading from "../components/Loading";
 import usePrevious from "../hooks/usePrevious";
+import MainSceneBackground from "../components/MainScene/Site/MainSceneBackground";
+import { useSpring, a } from "@react-spring/three";
 
 const MainScene = () => {
   const intro = useStore((state) => state.intro);
@@ -29,14 +31,22 @@ const MainScene = () => {
   const setInputCooldown = useStore((state) => state.setInputCooldown);
   const wordNotFound = useStore((state) => state.wordNotFound);
 
+  const [bgState, setBgState] = useSpring(() => ({
+    posY: 0,
+    duration: 1200,
+  }));
+
   useEffect(() => {
     if (subscene === "pause") {
+      setTimeout(() => setBgState({ posY: 2 }), 3600);
       setTimeout(() => setPaused(true), 3400);
     } else if (prevData?.subscene === "pause" && subscene === "site") {
+      setBgState({ posY: 0 });
       setPaused(false);
     }
-  }, [prevData?.subscene, subscene]);
+  }, [prevData?.subscene, setBgState, subscene]);
 
+  // move up instead of rotate todo
   useEffect(() => {
     if (wordSelected) {
       setTimeout(() => setWordSelected(false), 3100);
@@ -50,6 +60,11 @@ const MainScene = () => {
       setStarfieldIntro(false);
       setLainIntroAnim(false);
       setIntroFinished(false);
+
+      starfieldIntroRef.current = false;
+      lainIntroRef.current = false;
+      introFinishedRef.current = false;
+
       setInputCooldown(-1);
     } else {
       setInputCooldown(0);
@@ -57,23 +72,28 @@ const MainScene = () => {
   }, [intro, setInputCooldown]);
 
   const [starfieldIntro, setStarfieldIntro] = useState(false);
+  const starfieldIntroRef = useRef(false);
   const [lainIntroAnim, setLainIntroAnim] = useState(false);
+  const lainIntroRef = useRef(false);
   const [introFinished, setIntroFinished] = useState(false);
+  const introFinishedRef = useRef(false);
 
   useFrame(() => {
     if (!introFinished && intro && introWrapperRef.current) {
       if (introWrapperRef.current.position.z === -10) playAudio(audio.sound32);
       if (
         Math.round(introWrapperRef.current.position.z) === -3 &&
-        !starfieldIntro
+        !starfieldIntroRef.current
       ) {
         setStarfieldIntro(true);
+        starfieldIntroRef.current = true;
       }
       if (
         Math.round(introWrapperRef.current.position.z) === -1 &&
-        !lainIntroAnim
+        !lainIntroRef.current
       ) {
         setLainIntroAnim(true);
+        lainIntroRef.current = true;
       }
 
       if (introWrapperRef.current.position.z < 0) {
@@ -84,13 +104,14 @@ const MainScene = () => {
       }
 
       if (
-        !introFinished &&
+        !introFinishedRef.current &&
         !(
           introWrapperRef.current.rotation.x > 0 &&
           introWrapperRef.current.position.z < 0
         )
       ) {
         setIntroFinished(true);
+        introFinishedRef.current = true;
         setInputCooldown(0);
       }
     }
@@ -102,6 +123,9 @@ const MainScene = () => {
         <LevelSelection />
         <Popups />
         <Pause />
+        <a.group visible={introFinished} position-y={bgState.posY}>
+          <MainSceneBackground />
+        </a.group>
         <group visible={!paused}>
           <group visible={!wordSelected && (intro ? introFinished : true)}>
             <group visible={!wordNotFound}>

src/scenes/MediaScene.tsx

@@ -23,15 +23,6 @@ const MediaScene = () => {
     (state) => state.incrementFinalVideoViewCount
   );
 
-  useEffect(() => {
-    document.getElementsByTagName("canvas")[0].className =
-      "media-scene-background";
-
-    return () => {
-      document.getElementsByTagName("canvas")[0].className = "";
-    };
-  }, []);
-
   useEffect(() => {
     if (percentageElapsed === 100 && activeNode.triggers_final_video) {
       setScene("end");