tweaks, added basic 3d middle ring, need to fix transparency issue

src/App.tsx

@@ -20,7 +20,7 @@ const App = () => {
     <div id="game-root" className="game">
       {/* {moveToGame ? <MainScene /> : <Intro setMoveToGame={setMoveToGame} />} */}
       {/* <Intro /> */}
-      <Canvas concurrent>
+      <Canvas concurrent >
         <RecoilRoot>
           <MainScene />
         </RecoilRoot>

src/components/GrayPlanes/GrayPlanes.tsx

@@ -1,17 +1,9 @@
-import React, {
-  createRef,
-  memo,
-  MutableRefObject,
-  Ref,
-  RefObject,
-  useRef,
-} from "react";
+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 { a, useSpring } 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>();

src/components/Lain/Lain.tsx

@@ -1,16 +1,16 @@
-import {a, useSpring} from "@react-spring/three";
-import React, {Suspense, useState} from "react";
-import {useFrame, useLoader} from "react-three-fiber";
+import { a, useSpring } from "@react-spring/three";
+import React, { Suspense, useState } from "react";
+import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import {PlainSingularAnimator} from "three-plain-animator/lib/plain-singular-animator";
+import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
 import moveDownSpriteSheet from "../../static/sprites/jump_down.png";
 import moveUpSpriteSheet from "../../static/sprites/jump_up.png";
 import moveLeftSpriteSheet from "../../static/sprites/move_left.png";
 import moveRightSpriteSheet from "../../static/sprites/move_right.png";
 import standingSpriteSheet from "../../static/sprites/standing.png";
 import introSpriteSheet from "../../static/sprites/intro.png";
-import {useRecoilValue} from "recoil";
-import {lainMoveStateAtom, lainMovingAtom, lainPosYAtom} from "./LainAtom";
+import { useRecoilValue } from "recoil";
+import { lainMoveStateAtom, lainMovingAtom, lainPosYAtom } from "./LainAtom";
 
 type LainConstructorProps = {
   sprite: string;

src/components/MainScene/MainGroupAtom.tsx

@@ -1,16 +1,19 @@
 import { atom } from "recoil";
 
+// -2.5 - intro val
 export const mainGroupPosYAtom = atom({
   key: "mainGroupPosYAtom",
-  default: -2.5,
+  default: 0,
 });
 
+//-9.5 - intro val
 export const mainGroupPosZAtom = atom({
   key: "mainGroupPosZAtom",
-  default: -9.5,
+  default: 0,
 });
 
+//1.5 - intro val
 export const mainGroupRotXAtom = atom({
   key: "mainGroupRotXAtom",
-  default: 1.5,
+  default: 0,
 });

src/components/MainScene/MainScene.tsx

@@ -18,6 +18,7 @@ import {
   mainGroupRotXAtom,
 } from "./MainGroupAtom";
 import GrayPlanes from "../GrayPlanes/GrayPlanes";
+import MiddleRing from "../MiddleRing/MiddleRing";
 
 const MainScene = () => {
   const setLainMoving = useSetRecoilState(lainMovingAtom);
@@ -72,6 +73,7 @@ const MainScene = () => {
           <Starfield />
           <GrayPlanes />
           <Lights />
+          <MiddleRing />
           <OrbitControls />
         </a.group>
         <Lain />

src/components/MiddleRing/MiddleRing.tsx

@@ -0,0 +1,75 @@
+import React, { memo, useMemo } from "react";
+import { useFrame, useLoader, useThree } from "react-three-fiber";
+import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import middleRingTexture from "../../static/sprites/middle_ring_tex.png";
+
+import { draco } from "drei";
+import * as THREE from "three";
+
+type GLTFResult = GLTF & {
+  nodes: {
+    BezierCircle: THREE.Mesh;
+  };
+  materials: {
+    ["Material.001"]: THREE.MeshStandardMaterial;
+  };
+};
+
+const MiddleRing = memo(() => {
+  const { nodes, materials } = useLoader<GLTFResult>(
+    GLTFLoader,
+    "/models/ring2.glb",
+    draco("/draco-gltf/")
+  );
+
+  const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
+
+  const uniforms = {
+    tex: { type: "t", value: middleRingTex },
+  };
+
+  const vertexShader = `
+    varying vec2 vUv;
+
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `;
+
+  const fragmentShader = `
+    uniform sampler2D tex;
+
+    varying vec2 vUv;
+
+    void main() {
+        gl_FragColor = texture2D(tex, vUv);
+        gl_FragColor.a = 0.5;
+    }
+  `;
+
+  // -0.15, 03
+  return (
+    <group>
+      <mesh
+        material={materials["Material.001"]}
+        geometry={nodes.BezierCircle.geometry}
+        position={[0, -0.15, 0.3]}
+        scale={[0.8, 0.5, 0.8]}
+      >
+        <shaderMaterial
+          attach="material"
+          color={0x8cffde}
+          side={THREE.DoubleSide}
+          uniforms={uniforms}
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          transparent={true}
+        />
+        <meshBasicMaterial />
+      </mesh>
+    </group>
+  );
+});
+
+export default MiddleRing;

src/components/Starfield/Starfield.tsx

@@ -1,13 +1,5 @@
 import { a, useSpring } from "@react-spring/three";
-import React, {
-  createRef,
-  memo,
-  RefObject,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { createRef, memo, RefObject, useMemo, useRef } from "react";
 import { useFrame } from "react-three-fiber";
 import * as THREE from "three";
 import {
@@ -174,7 +166,7 @@ const Starfield = memo(() => {
 
   const starSpeeds = Array.from(
     { length: 60 },
-    () => lcgInstance() / 100000000000
+    () => lcgInstance() / 100000000000 + 0.03
   );
 
   useFrame(() => {
@@ -191,7 +183,7 @@ const Starfield = memo(() => {
               posRef.current!.position.z = el[1][idx][2] - 2.5;
             }
             posRef.current!.position.x -=
-              0.03 + starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
+              starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
             posRef.current!.position.z +=
               0.035 + starfieldState.starfieldBoostVal.get() * 0.5;
           }
@@ -206,7 +198,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();
+                starSpeeds[idx] + starfieldState.starfieldBoostVal.get()
               posRef.current!.position.z +=
                 0.015 + starfieldState.starfieldBoostVal.get() * 0.5;
             }