added stuff to gate scene

src/components/GateScene/GateHUD.tsx

@@ -9,7 +9,12 @@ import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import GateMiddleObject from "./GateMiddleObject";
 
-const GateMiddle = () => {
+type GateMiddleProps = {
+  intro: boolean;
+  gateLvl: number;
+};
+
+const GateHUD = (props: GateMiddleProps) => {
   const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
   const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
   const gateAccessPassTexture = useLoader(
@@ -44,7 +49,12 @@ const GateMiddle = () => {
         />
       </sprite>
 
-      <sprite scale={[1.6, 0.1, 1]} position={[0, 0.8, 0.2]} renderOrder={3}>
+      <sprite
+        scale={[1.6, 0.1, 1]}
+        position={[0, 0.8, 0.2]}
+        renderOrder={3}
+        visible={!props.intro && props.gateLvl === 4}
+      >
         <spriteMaterial
           attach="material"
           map={changeSiteEnableTexture}
@@ -59,6 +69,7 @@ const GateMiddle = () => {
           map={gatePassUnderline}
           transparent={true}
           depthTest={false}
+          visible={!props.intro && props.gateLvl === 4}
         />
       </sprite>
 
@@ -72,6 +83,7 @@ const GateMiddle = () => {
           map={gateLeftThingTexture}
           transparent={true}
           depthTest={false}
+          visible={!props.intro && props.gateLvl === 4}
         />
       </sprite>
 
@@ -85,6 +97,7 @@ const GateMiddle = () => {
           map={gateRightThingTexture}
           transparent={true}
           depthTest={false}
+          visible={!props.intro && props.gateLvl === 4}
         />
       </sprite>
 
@@ -94,12 +107,11 @@ const GateMiddle = () => {
           map={gateAccessPassTexture}
           transparent={true}
           depthTest={false}
+          visible={!props.intro && props.gateLvl === 4}
         />
       </sprite>
-
-      <GateMiddleObject />
     </>
   );
 };
 
-export default GateMiddle;
+export default GateHUD;

src/components/GateScene/GateMiddleObject.tsx

@@ -5,7 +5,12 @@ import { a, useSpring, useSprings } from "@react-spring/three";
 import blue_digit_positions from "../../resources/blue_digit_positions.json";
 import Mirror from "./GateMiddleObject/Mirror";
 
-const GateMiddleObject = () => {
+type GateMiddleObjectProps = {
+  intro: boolean;
+  gateLvl: number;
+};
+
+const GateMiddleObject = (props: GateMiddleObjectProps) => {
   const [middleGroupPos, setMiddleGroupPos] = useState<number[]>();
 
   const [springs, set] = useSprings(44, (intIdx) => {
@@ -57,6 +62,7 @@ const GateMiddleObject = () => {
         position-x={middleObjectGroupState.posX}
         position-y={middleObjectGroupState.posY}
         position-z={middleObjectGroupState.posZ}
+        visible={props.intro}
       >
         {springs.map((item, idx) => {
           if (item.type) {
@@ -78,7 +84,24 @@ const GateMiddleObject = () => {
           }
         })}
       </a.group>
-      <Mirror />
+      <Mirror
+        visible={props.gateLvl === 1 ? !props.intro : props.gateLvl > 0}
+        rotation={[0, Math.PI / 2, 0]}
+        position={[0, 0, -0.4]}
+      />
+      <Mirror
+        visible={props.gateLvl === 2 ? !props.intro : props.gateLvl > 1}
+        rotation={[0, Math.PI / 2, 0]}
+        position={[0, 0, 0.5]}
+      />
+      <Mirror
+        visible={props.gateLvl === 3 ? !props.intro : props.gateLvl > 2}
+        position={[0.4, 0, 0.05]}
+      />
+      <Mirror
+        visible={props.gateLvl === 4 ? !props.intro : props.gateLvl > 3}
+        position={[-0.4, 0, 0.05]}
+      />
     </>
   );
 };

src/components/GateScene/GateMiddleObject/BlueOne.tsx

@@ -58,7 +58,7 @@ const BlueOne = (props: BlueOneProps) => {
       scale={[0.04, 0.1, 0]}
       position-x={props.posX}
       position-y={props.posY}
-      renderOrder={3}
+      renderOrder={5}
       visible={props.visibility}
     >
       <planeBufferGeometry attach="geometry"></planeBufferGeometry>

src/components/GateScene/GateMiddleObject/BlueZero.tsx

@@ -59,7 +59,7 @@ const BlueZero = (props: BlueZeroProps) => {
       scale={[0.08, 0.1, 0]}
       position-x={props.posX}
       position-y={props.posY}
-      renderOrder={3}
+      renderOrder={5}
       visible={props.visibility}
     >
       <planeBufferGeometry attach="geometry"></planeBufferGeometry>

src/components/GateScene/GateMiddleObject/Mirror.tsx

@@ -1,9 +1,8 @@
-import React, { useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import mirrorTexture from "../../../static/sprite/gate_object_texture.png";
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
-import { useGLTF } from "@react-three/drei/useGLTF";
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -14,11 +13,17 @@ type GLTFResult = GLTF & {
   };
 };
 
-const Mirror = () => {
+type MirrorProps = {
+  visible: boolean;
+  position: number[];
+  rotation?: number[];
+};
+
+const Mirror = (props: MirrorProps) => {
   const mirrorTex = useLoader(THREE.TextureLoader, mirrorTexture);
   const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/gatePass.glb");
 
-  const mirrorRef = useRef<THREE.Object3D>();
+  const mirrorGroupRef = useRef<THREE.Object3D>();
   const materialRef = useRef<THREE.MeshBasicMaterial>();
 
   const tex = useMemo(() => {
@@ -27,8 +32,8 @@ const Mirror = () => {
   }, [mirrorTex]);
 
   useFrame(() => {
-    if (mirrorRef.current) {
-      mirrorRef.current.rotation.y -= 0.03;
+    if (mirrorGroupRef.current) {
+      mirrorGroupRef.current.rotation.y -= 0.03;
     }
     if (materialRef.current) {
       tex.offset.y -= 0.01;
@@ -37,27 +42,34 @@ const Mirror = () => {
 
   return (
     <>
-      <group ref={mirrorRef} position={[0, 0, 0.2]}>
-        <mesh
-          geometry={nodes.GatePass.geometry}
-          scale={[0.01, 0.6, 0.2]}
-          rotation={[0, Math.PI / 2, 0]}
-          renderOrder={4}
-          position={[0, 0, -0.2]}
+      <group position={[0, 0, -0.5]}>
+        <group
+          ref={mirrorGroupRef}
+          position={[0, 0, 0.2]}
+          scale={[0.8, 0.8, 1]}
         >
-          <meshBasicMaterial
-            ref={materialRef}
-            attach="material"
-            transparent={true}
-            map={mirrorTex}
-            depthTest={false}
-          />
-        </mesh>
+          <mesh
+            geometry={nodes.GatePass.geometry}
+            scale={[0.01, 0.6, 0.2]}
+            rotation={
+              props.rotation
+                ? (props.rotation as [number, number, number])
+                : [0, 0, 0]
+            }
+            renderOrder={4}
+            position={props.position as [number, number, number]}
+          >
+            <meshBasicMaterial
+              ref={materialRef}
+              attach="material"
+              transparent={true}
+              map={mirrorTex}
+              depthTest={false}
+              visible={props.visible}
+            />
+          </mesh>
+        </group>
       </group>
-
-      {/*<mesh renderOrder={4} position={[0.2, 0.2, 0.2]} scale={[0.4, 1, 0.05]}>*/}
-      {/*  <boxBufferGeometry attach="geometry" />*/}
-      {/*</mesh>*/}
     </>
   );
 };

src/scenes/GateScene.tsx

@@ -1,15 +1,27 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import GateSide from "../components/GateScene/GateSide";
 import { OrbitControls } from "@react-three/drei";
-import GateMiddle from "../components/GateScene/GateMiddle";
+import GateHUD from "../components/GateScene/GateHUD";
+import GateMiddleObject from "../components/GateScene/GateMiddleObject";
+import { useGateStore } from "../store";
 
 const GateScene = () => {
+  const gateLvl = useGateStore((state) => state.gateLvl);
+  const [introAnim, setIntroAnim] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIntroAnim(false);
+    }, 2500);
+  }, []);
+
   return (
     <perspectiveCamera position-z={3}>
       <pointLight intensity={5.2} color={0xffffff} position={[-2, 0, 0]} />
       <OrbitControls />
       <GateSide />
-      <GateMiddle />
+      <GateHUD intro={introAnim} gateLvl={gateLvl} />
+      <GateMiddleObject intro={introAnim} gateLvl={gateLvl} />
     </perspectiveCamera>
   );
 };

src/store.ts

@@ -168,6 +168,11 @@ type MainMenuState = {
   setActiveBootElement: (to: string) => void;
 };
 
+type GateState = {
+  gateLvl: number;
+  incrementGateLvl: () => void;
+};
+
 export const useTextRendererStore = create<TextRendererState>((set) => ({
   // yellow text
   yellowText: "Play",
@@ -389,12 +394,12 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "boot",
+  currentScene: "gate",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));
 
 export const useSubsceneStore = create<SubsceneState>((set) => ({
-  activeSubscene: "load_data",
+  activeSubscene: "authorize_user",
   setActiveSubScene: (to) => set(() => ({ activeSubscene: to })),
 }));
 
@@ -414,3 +419,8 @@ export const useImageStore = create(
     })
   )
 );
+
+export const useGateStore = create<GateState>((set) => ({
+  gateLvl: 4,
+  incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
+}));