added gray planes in the back, intro looks much better now

src/components/GrayPlanes/GrayPlanes.tsx

@@ -0,0 +1,70 @@
+import React, { createRef, memo, 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";
+
+const GrayPlanes = memo(() => {
+  const grayPlaneGroupRef = useRef<THREE.Object3D>();
+
+  const grayPlanePosY = useRecoilValue(grayPlanesPosYAtom);
+  const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom);
+
+  const grayPlanePoses = [
+    [1.2, 0, -1.2],
+    [1.2, 0, 1.2],
+    [1.2, 0, -0.5],
+    [-1.2, 0, -1.2],
+    [-1.2, 0, 1.2],
+    [-1.2, 0, 1],
+    [0.5, 0, 1],
+  ];
+
+  const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
+    useRef<RefObject<THREE.Object3D>[]>(
+      poses.map(() => createRef<THREE.Object3D>())
+    )
+  );
+
+  useFrame(() => {
+    grayPlaneGroupRef.current!.rotation.y -= 0.01;
+    grayPlaneRefs.forEach((ref: any) => (ref.current!.rotation.y += 0.03));
+  });
+
+  const grayPlaneState = useSpring({
+    grayPlanePosY: grayPlanePosY,
+    config: { duration: 1200 },
+  });
+
+  return (
+    <a.group
+      position={[0.1, 0, -2]}
+      position-y={grayPlaneState.grayPlanePosY}
+      rotation={[0, 0, 0]}
+      ref={grayPlaneGroupRef}
+      visible={grayPlanesVisible}
+    >
+      {grayPlaneRefs.map((ref, idx: number) => {
+        return (
+          <mesh
+            scale={[0.04, 10, 0.04]}
+            position={grayPlanePoses[idx] as [number, number, number]}
+            ref={ref}
+          >
+            <planeBufferGeometry attach="geometry" />
+            <meshBasicMaterial
+              attach="material"
+              color={0xd3d3d3}
+              opacity={0.2}
+              transparent={true}
+              side={THREE.DoubleSide}
+            />
+          </mesh>
+        );
+      })}
+    </a.group>
+  );
+});
+
+export default GrayPlanes;

src/components/GrayPlanes/GrayPlanesAtom.tsx

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

src/components/HUD/CurrentHUDAtom.tsx

@@ -1,8 +0,0 @@
-import {atom} from "recoil";
-import level_sprite_huds from "../../resources/level_sprite_huds.json";
-import {SpriteHuds} from "./HUDElement";
-
-export const currentHUDAtom = atom({
-  key: "currentHUDAtom",
-  default: (level_sprite_huds as SpriteHuds)["22"],
-});

src/components/HUD/HUDActiveAtom.tsx

@@ -1,11 +0,0 @@
-import { atom } from "recoil";
-
-export const hudActiveAtom = atom({
-  key: "hudActiveAtom",
-  default: 1,
-});
-
-export const hudVisibilityAtom = atom({
-  key: "hudVisibilityAtom",
-  default: false,
-});

src/components/HUD/HUDElement.tsx

@@ -1,5 +1,5 @@
-import React, {memo} from "react";
-import {useLoader} from "react-three-fiber";
+import React, { memo } from "react";
+import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import bigHud from "../../static/sprites/big_hud.png";
 import bigHudMirrored from "../../static/sprites/big_hud_mirrored.png";
@@ -7,10 +7,10 @@ import longHud from "../../static/sprites/long_hud.png";
 import longHudMirrored from "../../static/sprites/long_hud_mirrored.png";
 import boringHud from "../../static/sprites/long_hud_boring.png";
 import boringHudMirrored from "../../static/sprites/long_hud_boring_mirrored.png";
-import {a, useSpring} from "@react-spring/three";
-import {useRecoilValue} from "recoil";
-import {hudActiveAtom} from "./HUDActiveAtom";
-import {currentHUDAtom} from "./CurrentHUDAtom";
+import { a, useSpring } from "@react-spring/three";
+import { useRecoilValue } from "recoil";
+import { hudActiveAtom } from "./HUDElementAtom";
+import { currentHUDAtom } from "./HUDElementAtom";
 
 export type HUDElementProps = {
   hudVisibility: boolean;

src/components/HUD/HUDElementAtom.tsx

@@ -0,0 +1,19 @@
+import { atom } from "recoil";
+import level_sprite_huds from "../../resources/level_sprite_huds.json";
+import {SpriteHuds} from "./HUDElement";
+
+
+export const hudActiveAtom = atom({
+    key: "hudActiveAtom",
+    default: 1,
+});
+
+export const hudVisibilityAtom = atom({
+    key: "hudVisibilityAtom",
+    default: false,
+});
+
+export const currentHUDAtom = atom({
+    key: "currentHUDAtom",
+    default: (level_sprite_huds as SpriteHuds)["22"],
+});

src/components/InputHandler.tsx

@@ -7,7 +7,7 @@ import {
   LainStanding,
 } from "./Lain/Lain";
 import { useRecoilState, useSetRecoilState } from "recoil";
-import { hudActiveAtom } from "./HUD/HUDActiveAtom";
+import { hudActiveAtom, currentHUDAtom } from "./HUD/HUDElementAtom";
 import { currentSpriteAtom } from "./LevelSprite/CurrentSpriteAtom";
 import lain_animations from "../resources/lain_animations.json";
 import level_sprite_huds from "../resources/level_sprite_huds.json";
@@ -19,9 +19,9 @@ import {
 } from "./Lain/LainAtom";
 import { camPosYAtom, camRotYAtom } from "./MainScene/CameraAtom";
 import { starfieldPosYAtom } from "./Starfield/StarfieldAtom";
-import { currentHUDAtom } from "./HUD/CurrentHUDAtom";
 import { SpriteHuds } from "./HUD/HUDElement";
 import { orthoCamPosYAtom } from "./OrthoCamera/OrthoCameraAtom";
+import { grayPlanesPosYAtom } from "./GrayPlanes/GrayPlanesAtom";
 
 type KeyCodeAssociations = {
   [keyCode: number]: string;
@@ -62,6 +62,8 @@ const InputHandler = () => {
 
   const setLainPosY = useSetRecoilState(lainPosYAtom);
 
+  const setGrayPlanePosY = useSetRecoilState(grayPlanesPosYAtom);
+
   const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom);
 
   const moveCamera = useCallback(
@@ -70,8 +72,15 @@ const InputHandler = () => {
       setLainPosY((prev: number) => prev - val);
       setStarfieldPosY((prev: number) => prev - val);
       setOrthoCamPosY((prev: number) => prev - val);
+      setGrayPlanePosY((prev: number) => prev - val);
     },
-    [setCamPosY, setLainPosY, setStarfieldPosY, setOrthoCamPosY]
+    [
+      setCamPosY,
+      setLainPosY,
+      setStarfieldPosY,
+      setOrthoCamPosY,
+      setGrayPlanePosY,
+    ]
   );
 
   const rotateCamera = useCallback(

src/components/MainScene/MainScene.tsx

@@ -1,6 +1,6 @@
 import { a, useSpring } from "@react-spring/three";
 import { OrbitControls } from "drei";
-import React, { Suspense, useEffect, useRef, useState } from "react";
+import React, { Suspense, useEffect } from "react";
 import Hub from "../Hub";
 import Lain, { LainIntro } from "../Lain/Lain";
 import Lights from "../Lights";
@@ -17,6 +17,7 @@ import {
   mainGroupPosZAtom,
   mainGroupRotXAtom,
 } from "./MainGroupAtom";
+import GrayPlanes from "../GrayPlanes/GrayPlanes";
 
 const MainScene = () => {
   const setLainMoving = useSetRecoilState(lainMovingAtom);
@@ -69,6 +70,7 @@ const MainScene = () => {
           <Hub />
           <OrthoCamera />
           <Starfield />
+          <GrayPlanes />
           <Lights />
           <OrbitControls />
         </a.group>

src/components/MainScene/MainSceneIntro.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useEffect } from "react";
 import { useSetRecoilState } from "recoil";
-import { hudActiveAtom, hudVisibilityAtom } from "../HUD/HUDActiveAtom";
+import { hudActiveAtom, hudVisibilityAtom } from "../HUD/HUDElementAtom";
 import {
   mainGroupPosYAtom,
   mainGroupPosZAtom,
@@ -9,7 +9,12 @@ import {
 import { LainStanding } from "../Lain/Lain";
 import { lainMoveStateAtom, lainMovingAtom } from "../Lain/LainAtom";
 import { orbVisibilityAtom } from "../Orb/OrbAtom";
-import { introStarfieldVisibilityAtom } from "../Starfield/StarfieldAtom";
+import {
+  introStarfieldVisibilityAtom,
+  mainStarfieldBoostValAtom,
+  mainStarfieldVisibilityAtom,
+} from "../Starfield/StarfieldAtom";
+import { grayPlanesVisibleAtom } from "../GrayPlanes/GrayPlanesAtom";
 
 // ghost component to manipulate the intro animation for the main scene.
 
@@ -28,11 +33,17 @@ const MainSceneIntro = memo(() => {
   const setIntroStarfieldVisible = useSetRecoilState(
     introStarfieldVisibilityAtom
   );
+  const setMainStarfieldVisible = useSetRecoilState(
+    mainStarfieldVisibilityAtom
+  );
+  const setMainStarfieldBoostVal = useSetRecoilState(mainStarfieldBoostValAtom);
 
   const setMainGroupPosY = useSetRecoilState(mainGroupPosYAtom);
   const setMainGroupPosZ = useSetRecoilState(mainGroupPosZAtom);
   const setMainGroupRotX = useSetRecoilState(mainGroupRotXAtom);
 
+  const setGrayPlanesVisible = useSetRecoilState(grayPlanesVisibleAtom);
+
   useEffect(() => {
     setMainGroupPosY(0);
     setMainGroupPosZ(0);
@@ -40,6 +51,15 @@ const MainSceneIntro = memo(() => {
       setMainGroupRotX(0);
     }, 2400);
 
+    setTimeout(() => {
+      setGrayPlanesVisible(true);
+    }, 2500);
+
+    setTimeout(() => {
+      setMainStarfieldVisible(true);
+      setMainStarfieldBoostVal(0);
+    }, 2800);
+
     setHudActive((prev: number) => Number(!prev));
     setTimeout(() => {
       setLainMoving(false);

src/components/OrthoCamera/OrthoCamera.tsx

@@ -7,7 +7,7 @@ import { useRecoilValue } from "recoil";
 import { orthoCamPosYAtom } from "./OrthoCameraAtom";
 import { useSpring, a } from "@react-spring/three";
 import { orbVisibilityAtom } from "../Orb/OrbAtom";
-import { hudVisibilityAtom } from "../HUD/HUDActiveAtom";
+import { hudVisibilityAtom } from "../HUD/HUDElementAtom";
 
 const OrthoCamera = memo(() => {
   const { gl, scene, camera } = useThree();

src/components/Starfield/Starfield.tsx

@@ -12,6 +12,8 @@ import { useFrame } from "react-three-fiber";
 import * as THREE from "three";
 import {
   introStarfieldVisibilityAtom,
+  mainStarfieldBoostValAtom,
+  mainStarfieldVisibilityAtom,
   starfieldPosYAtom,
 } from "./StarfieldAtom";
 import { useRecoilValue } from "recoil";
@@ -42,14 +44,16 @@ type IntroStarfieldObjectData = {
 const Starfield = memo(() => {
   const introStarfieldGroupRef = useRef<THREE.Object3D>();
 
-  const [mainStarfieldVisible, setMainStarfieldVisible] = useState(false);
-
   const starfieldPosY = useRecoilValue(starfieldPosYAtom);
 
   const introStarfieldVisible = useRecoilValue(introStarfieldVisibilityAtom);
+  const mainStarfieldVisible = useRecoilValue(mainStarfieldVisibilityAtom);
+
+  const mainStarfieldBoostVal = useRecoilValue(mainStarfieldBoostValAtom);
 
   const starfieldState = useSpring({
     starfieldPosY: starfieldPosY,
+    starfieldBoostVal: mainStarfieldBoostVal,
     config: { duration: 1200 },
   });
 
@@ -186,8 +190,10 @@ const Starfield = memo(() => {
               posRef.current!.position.x = el[1][idx][0] + 6;
               posRef.current!.position.z = el[1][idx][2] - 2.5;
             }
-            posRef.current!.position.x -= 0.03 + starSpeeds[idx];
-            posRef.current!.position.z += 0.035;
+            posRef.current!.position.x -=
+              0.03 + starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
+            posRef.current!.position.z +=
+              0.035 + starfieldState.starfieldBoostVal.get() * 0.5;
           }
         );
       });
@@ -199,8 +205,10 @@ const Starfield = memo(() => {
               posRef.current!.position.x = el[1][idx][0] - 9;
               posRef.current!.position.z = el[1][idx][2] - 0.5;
             } else {
-              posRef.current!.position.x += 0.03 + starSpeeds[idx];
-              posRef.current!.position.z += 0.015;
+              posRef.current!.position.x +=
+                0.03 + starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
+              posRef.current!.position.z +=
+                0.015 + starfieldState.starfieldBoostVal.get() * 0.5;
             }
           }
         );
@@ -271,18 +279,11 @@ const Starfield = memo(() => {
     },
   ];
 
-  useEffect(() => {
-    setTimeout(() => {
-      setMainStarfieldVisible(true);
-      console.log("123");
-    }, 1800);
-  }, []);
-
   return (
     <>
       <a.group
         ref={introStarfieldGroupRef}
-        position={[-2, -20, -3.2]}
+        position={[-2, -35, -3.2]}
         rotation={[0, 0, 0]}
         visible={introStarfieldVisible}
       >

src/components/Starfield/StarfieldAtom.tsx

@@ -9,3 +9,13 @@ export const introStarfieldVisibilityAtom = atom({
   key: "introStarfieldVisibilityAtom",
   default: true,
 });
+
+export const mainStarfieldVisibilityAtom = atom({
+  key: "mainStarfieldVisibilityAtom",
+  default: false,
+});
+
+export const mainStarfieldBoostValAtom = atom({
+  key: "mainStarfieldBoostVal",
+  default: 0.2,
+});