added starfield, needs optimization

src/components/Game.tsx

@@ -286,7 +286,7 @@ const Game = () => {
         rotation-y={camRotY}
       >
         <Suspense fallback={null}>
-          {/* <OrbitControls />
+          <OrbitControls />
           <Preloader />
           <Lain
             isLainMoving={isLainMoving}
@@ -318,7 +318,7 @@ const Game = () => {
             bigHUDScale={currentSpriteHUD!["big"]["scale"]}
             orthoCameraPosY={orthoCameraPosY}
             id={currentSpriteHUD!["id"]}
-          /> */}
+          />
           <OrbitControls />
           <Starfield />
           <Lights />

src/components/GrayRing.tsx

@@ -28,7 +28,6 @@ const GrayRing = (props: GrayRingProps) => {
       scale={[1.3, 1.3, 1.3]}
       position={[0, props.grayRingPosY, 0]}
       rotation={[0, 0.26, 0]}
-      dispose={null}
     >
       <mesh geometry={nodes.Circle.geometry} rotation={[0, Math.PI / 4, 0]}>
         <meshLambertMaterial

src/components/PurpleRing.tsx

@@ -44,7 +44,6 @@ const PurpleRing = (props: PurpleRingProps) => {
       position={[0, props.purpleRingPosY, 0]}
       rotation-y={purpleRingRotY}
       scale={[1.3, 1.3, 1.3]}
-      dispose={null}
     >
       <mesh geometry={nodes.Circle002.geometry} rotation={[0, Math.PI / 4, 0]}>
         <meshLambertMaterial

src/components/Starfield.tsx

@@ -1,5 +1,7 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useReducer, useRef, createRef } from "react";
 import * as THREE from "three";
+import { a, useSpring } from "@react-spring/three";
+import { useFrame } from "react-three-fiber";
 
 const Starfield = () => {
   const blueUniforms = useMemo(
@@ -61,41 +63,209 @@ const Starfield = () => {
     }
       `;
 
+  const LCG = (a: number, c: number, m: number, s: number) => () =>
+    (s = (s * a + c) % m);
+
+  const lcgInstance = LCG(1664525, 1013904223, 2 ** 32, 2);
+
+  const posesBlueFromRight = Array.from({ length: 40 }, () => [
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+  ]);
+
+  const posesBlueFromLeft = Array.from({ length: 25 }, () => [
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+  ]);
+
+  const posesCyanFromRight = Array.from({ length: 10 }, () => [
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+  ]);
+
+  const posesCyanFromLeft = Array.from({ length: 5 }, () => [
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+  ]);
+
+  const posesWhiteFromleft = Array.from({ length: 5 }, () => [
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+    lcgInstance() / 1000000000,
+  ]);
+
+  const blueFromRightRef = useRef(posesBlueFromRight.map(() => createRef()));
+  const blueFromLeftRef = useRef(posesBlueFromLeft.map(() => createRef()));
+  const cyanFromRightRef = useRef(posesCyanFromRight.map(() => createRef()));
+  const cyanFromLeftRef = useRef(posesCyanFromLeft.map(() => createRef()));
+  const whiteFromLeftRef = useRef(posesWhiteFromleft.map(() => createRef()));
+
+  useFrame(() => {
+    blueFromRightRef.current.map((ref) => {
+      if ((ref.current as any).position.x < -1) {
+        (ref.current as any).position.x += 7.3;
+        (ref.current as any).position.z -= 7.3;
+      } else {
+        (ref.current as any).position.x -= 0.03;
+        (ref.current as any).position.z += 0.03;
+      }
+    });
+    blueFromLeftRef.current.map((ref) => {
+      if ((ref.current as any).position.x > 3) {
+        (ref.current as any).position.x -= 3.3;
+        (ref.current as any).position.z -= 3.3;
+      } else {
+        (ref.current as any).position.x += 0.03;
+        (ref.current as any).position.z += 0.03;
+      }
+    });
+    cyanFromRightRef.current.map((ref) => {
+      if ((ref.current as any).position.x < -1) {
+        (ref.current as any).position.x += 4.3;
+        (ref.current as any).position.z -= 4.3;
+      } else {
+        (ref.current as any).position.x -= 0.03;
+        (ref.current as any).position.z += 0.03;
+      }
+    });
+    cyanFromLeftRef.current.map((ref) => {
+      if ((ref.current as any).position.x > 3) {
+        (ref.current as any).position.x -= 3.3;
+        (ref.current as any).position.z -= 3.3;
+      } else {
+        (ref.current as any).position.x += 0.03;
+        (ref.current as any).position.z += 0.03;
+      }
+    });
+    whiteFromLeftRef.current.map((ref) => {
+      if ((ref.current as any).position.x > 3) {
+        (ref.current as any).position.x -= 3.3;
+        (ref.current as any).position.z -= 3.3;
+      } else {
+        (ref.current as any).position.x += 0.03;
+        (ref.current as any).position.z += 0.03;
+      }
+    });
+  });
+
   return (
-    <group>
+    <group position={[-0.7, -1.5, -4]}>
-      <mesh scale={[0.01, 0.9, 1]}>
+      {posesBlueFromRight.map((pos: any, idx: number) => {
-        <planeGeometry attach="geometry" />
+        return (
-        <shaderMaterial
+          <mesh
-          attach="material"
+            ref={(blueFromRightRef.current as any)[idx]}
-          uniforms={blueUniforms}
+            scale={[0.01, 2, 1]}
-          fragmentShader={fragmentShader}
+            rotation={[1.7, 0, 0.9]}
-          vertexShader={vertexShader}
+            position={[pos[0], pos[1], pos[2]]}
-          side={THREE.DoubleSide}
+            key={idx}
-          transparent={true}
+            renderOrder={-1}
-        />
+          >
-      </mesh>
+            <planeGeometry attach="geometry" />
-      <mesh scale={[0.01, 0.9, 1]} position={[0.1, 0, 0]}>
+            <shaderMaterial
-        <planeGeometry attach="geometry" />
+              attach="material"
-        <shaderMaterial
+              uniforms={blueUniforms}
-          attach="material"
+              fragmentShader={fragmentShader}
-          uniforms={cyanUniforms}
+              vertexShader={vertexShader}
-          fragmentShader={fragmentShader}
+              side={THREE.DoubleSide}
-          vertexShader={vertexShader}
+              transparent={true}
-          side={THREE.DoubleSide}
+              depthWrite={false}
-          transparent={true}
+            />
-        />
+          </mesh>
-      </mesh>
+        );
-      <mesh scale={[0.01, 0.9, 1]} position={[0.2, 0, 0]}>
+      })}
-        <planeGeometry attach="geometry" />
+      {posesBlueFromLeft.map((pos: any, idx: number) => {
-        <shaderMaterial
+        return (
-          attach="material"
+          <mesh
-          uniforms={whiteUniforms}
+            ref={(blueFromLeftRef.current as any)[idx]}
-          fragmentShader={fragmentShader}
+            scale={[0.01, 2, 1]}
-          vertexShader={vertexShader}
+            rotation={[1.7, 0, -0.9]}
-          side={THREE.DoubleSide}
+            position={[pos[0] - 2.4, pos[1] - 1.5, pos[2]]}
-          transparent={true}
+            key={pos[0]}
-        />
+            renderOrder={-1}
-      </mesh>
+          >
+            <planeGeometry attach="geometry" />
+            <shaderMaterial
+              attach="material"
+              uniforms={blueUniforms}
+              fragmentShader={fragmentShader}
+              vertexShader={vertexShader}
+              side={THREE.DoubleSide}
+              transparent={true}
+              depthWrite={false}
+            />
+          </mesh>
+        );
+      })}
+      {posesCyanFromRight.map((pos: any, idx: number) => {
+        return (
+          <mesh
+            ref={(cyanFromRightRef.current as any)[idx]}
+            scale={[0.01, 0.9, 1]}
+            position={[pos[0] - 1.3, pos[1], pos[2] + 1.5]}
+            rotation={[1.7, 0, 0.9]}
+            renderOrder={-1}
+          >
+            <planeGeometry attach="geometry" />
+            <shaderMaterial
+              attach="material"
+              uniforms={cyanUniforms}
+              fragmentShader={fragmentShader}
+              vertexShader={vertexShader}
+              side={THREE.DoubleSide}
+              transparent={true}
+              depthWrite={false}
+            />
+          </mesh>
+        );
+      })}
+      {posesCyanFromLeft.map((pos: any, idx: number) => {
+        return (
+          <mesh
+            ref={(cyanFromLeftRef.current as any)[idx]}
+            scale={[0.01, 0.9, 1]}
+            position={[pos[0] - 1.3, pos[1], pos[2] + 1.5]}
+            rotation={[1.7, 0, -0.9]}
+            renderOrder={-1}
+          >
+            <planeGeometry attach="geometry" />
+            <shaderMaterial
+              attach="material"
+              uniforms={cyanUniforms}
+              fragmentShader={fragmentShader}
+              vertexShader={vertexShader}
+              side={THREE.DoubleSide}
+              transparent={true}
+              depthWrite={false}
+            />
+          </mesh>
+        );
+      })}
+      {posesWhiteFromleft.map((pos: any, idx: number) => {
+        return (
+          <mesh
+            ref={(whiteFromLeftRef.current as any)[idx]}
+            scale={[0.01, 0.9, 1]}
+            position={[pos[0] - 1.3, pos[1], pos[2] + 1.5]}
+            rotation={[1.7, 0, -0.9]}
+            renderOrder={-1}
+          >
+            <planeGeometry attach="geometry" />
+            <shaderMaterial
+              attach="material"
+              uniforms={whiteUniforms}
+              fragmentShader={fragmentShader}
+              vertexShader={vertexShader}
+              side={THREE.DoubleSide}
+              transparent={true}
+              depthWrite={false}
+            />
+          </mesh>
+        );
+      })}
     </group>
   );
 };