starting on middle ring pause anim

src/components/MainScene/Lain.tsx

@@ -9,6 +9,7 @@ import moveRightSpriteSheet from "../../static/sprite/move_right.png";
 import standingSpriteSheet from "../../static/sprite/standing.png";
 import introSpriteSheet from "../../static/sprite/intro.png";
 import throwNodeSpriteSheet from "../../static/sprite/throw_node.png";
+import ripMiddleRingSpriteSheet from "../../static/sprite/rip_middle_ring.png";
 import { useLainStore, useMainSceneStore } from "../../store";
 
 type LainConstructorProps = {
@@ -112,6 +113,17 @@ export const LainThrowNode = () => {
   );
 };
 
+export const LainRipMiddleRing = () => {
+  return (
+    <LainConstructor
+      sprite={ripMiddleRingSpriteSheet}
+      frameCount={53}
+      framesHorizontal={8}
+      framesVertical={7}
+    />
+  );
+};
+
 type LainProps = {
   shouldIntro: boolean;
 };
@@ -128,6 +140,7 @@ const Lain = (props: LainProps) => {
     select_level_down: <LainMoveDown />,
     select_level_up: <LainMoveUp />,
     throw_node: <LainThrowNode />,
+    pause_game: <LainRipMiddleRing />,
   };
 
   const [introFinished, setIntroFinished] = useState(false);

src/components/MainScene/SyncedComponents/MiddleRing.tsx

@@ -4,6 +4,7 @@ import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
 import * as THREE from "three";
 import { a, useSpring } from "@react-spring/three";
 import { useMiddleRingStore } from "../../../store";
+import MiddleRingPart from "./MiddleRing/MiddleRingPart";
 
 const MiddleRing = () => {
   const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
@@ -41,6 +42,7 @@ const MiddleRing = () => {
 
   const middleRingMaterialRef = useRef<THREE.ShaderMaterial>();
   const middleRingRef = useRef<THREE.Object3D>();
+  const middleRingPartRef = useRef<THREE.Object3D>();
 
   const vertexShader = `
     varying vec2 vUv;
@@ -193,8 +195,9 @@ const MiddleRing = () => {
 
       middleRingMaterialRef.current.needsUpdate = true;
     }
-    if (rotating) {
+    if (rotating && middleRingRef && middleRingPartRef) {
       middleRingRef.current!.rotation.y += 0.05;
+      middleRingPartRef.current!.rotation.y += 0.05;
     }
   });
 
@@ -221,6 +224,22 @@ const MiddleRing = () => {
           transparent={true}
         />
       </a.mesh>
+
+      <group
+        rotation={[0, 0.9, 0]}
+        ref={middleRingPartRef}
+        position={[0, -0.12, 0.3]}
+      >
+        {[...Array(30).keys()].map((i) => {
+          const angle = (i / 30) * 2 * Math.PI;
+          return (
+            <MiddleRingPart
+              position={[Math.cos(angle) / 1.35, 0, Math.sin(angle) / 1.35]}
+              rotation={[0, -angle + Math.PI / 2, 0]}
+            />
+          );
+        })}
+      </group>
     </a.group>
   );
 };

src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from "react";
+import middleRingTexture from "../../../../static/sprite/middle_ring_tex.png";
+import { useLoader } from "react-three-fiber";
+import * as THREE from "three";
+import { a } from "@react-spring/three";
+
+type MiddleRingPartProps = {
+  position: number[];
+  rotation: number[];
+};
+
+const MiddleRingPart = (props: MiddleRingPartProps) => {
+  const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
+
+  const middleRingPartTex = useMemo(() => {
+    middleRingTex.repeat.set(0.4, 1);
+    return middleRingTex;
+  }, [middleRingTex]);
+
+  return (
+    <group
+      position={props.position as [number, number, number]}
+      rotation={props.rotation as [number, number, number]}
+    >
+      <a.mesh scale={[0.16, 0.032, 0]}>
+        <planeBufferGeometry attach="geometry" />
+        <meshBasicMaterial
+          attach="material"
+          map={middleRingPartTex}
+          transparent={true}
+          side={THREE.DoubleSide}
+        />
+      </a.mesh>
+    </group>
+  );
+};
+
+export default MiddleRingPart;

src/components/Preloader.tsx

@@ -11,6 +11,7 @@ import longHudMirroredSpriteSheet from "../static/sprite/long_hud_mirrored.png";
 import boringHudSpriteSheet from "../static/sprite/long_hud_boring.png";
 import boringHudMirroredSpriteSheet from "../static/sprite/long_hud_boring_mirrored.png";
 import throwNodeSpriteSheet from "../static/sprite/throw_node.png";
+import ripMiddleRingSpriteSheet from "../static/sprite/rip_middle_ring.png";
 
 import * as THREE from "three";
 import { useLoader, useThree } from "react-three-fiber";
@@ -41,6 +42,10 @@ const Preloader = () => {
     THREE.TextureLoader,
     boringHudMirroredSpriteSheet
   );
+  const ripMiddleRing = useLoader(
+    THREE.TextureLoader,
+    ripMiddleRingSpriteSheet
+  );
 
   const { gl } = useThree();
   useLayoutEffect(() => {
@@ -57,6 +62,7 @@ const Preloader = () => {
     gl.initTexture(boringHud);
     gl.initTexture(boringHudMirrored);
     gl.initTexture(throwNode);
+    gl.initTexture(ripMiddleRing);
   }, [
     moveDown,
     moveUp,
@@ -72,6 +78,7 @@ const Preloader = () => {
     longHudMirrored,
     intro,
     throwNode,
+    ripMiddleRing,
   ]);
   return null;
 };

src/core/StateManagers/EventManager.tsx

@@ -47,6 +47,7 @@ const getKeyCodeAssociation = (keyCode: number): string => {
     90: "X", // z key
     68: "TRIANGLE", // d key
     69: "L2", // e key
+    32: "SPACE",
   };
   return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs];
 };

src/core/StateManagers/MainSceneManagers/LainManager.tsx

@@ -14,6 +14,7 @@ const LainManager = (props: StateManagerProps) => {
         case "site_right":
         case "select_level_up":
         case "select_level_down":
+        case "pause_game":
           return {
             action: setLainMoveState,
             value: eventState.event,
@@ -28,6 +29,12 @@ const LainManager = (props: StateManagerProps) => {
             value: "throw_node",
             duration: 3900,
           };
+        case "test":
+          return {
+            action: setLainMoveState,
+            value: "pause_game",
+            duration: 3900,
+          };
       }
     },
     [setLainMoveState]

src/core/mainSceneEventHandler.ts

@@ -101,6 +101,8 @@ const handleMainSceneEvent = (gameContext: any) => {
         return { event: "toggle_level_selection" };
       case "TRIANGLE":
         return { event: "pause_game" };
+      case "SPACE":
+        return { event: "test" };
     }
 
     return {

src/scenes/MainScene.tsx

@@ -27,9 +27,9 @@ const MainScene = () => {
       <Suspense fallback={null}>
         <a.group>
           <Preloader />
-          <Pause visible={isPaused} />
-          <SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
-          {/*<MiddleRing />*/}
+          {/*<Pause visible={isPaused} />*/}
+          {/*<SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />*/}
+          <MiddleRing />
           <OrbitControls />
           <pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
           <pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />

src/store.ts

@@ -353,7 +353,7 @@ export const useMiddleRingStore = create(
     {
       transformState: {
         wobbleStrength: 0,
-        noiseStrength: 0.03,
+        noiseStrength: 0,
         posY: -0.11,
         rotX: 0,
         rotZ: 0,