diff --git a/src/components/GateScene/GateMiddle.tsx b/src/components/GateScene/GateHUD.tsx
similarity index 84%
rename from src/components/GateScene/GateMiddle.tsx
rename to src/components/GateScene/GateHUD.tsx
index 8c2f1b7..dfdaa03 100644
--- a/src/components/GateScene/GateMiddle.tsx
+++ b/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 = () => {
/>
-
+
{
map={gatePassUnderline}
transparent={true}
depthTest={false}
+ visible={!props.intro && props.gateLvl === 4}
/>
@@ -72,6 +83,7 @@ const GateMiddle = () => {
map={gateLeftThingTexture}
transparent={true}
depthTest={false}
+ visible={!props.intro && props.gateLvl === 4}
/>
@@ -85,6 +97,7 @@ const GateMiddle = () => {
map={gateRightThingTexture}
transparent={true}
depthTest={false}
+ visible={!props.intro && props.gateLvl === 4}
/>
@@ -94,12 +107,11 @@ const GateMiddle = () => {
map={gateAccessPassTexture}
transparent={true}
depthTest={false}
+ visible={!props.intro && props.gateLvl === 4}
/>
-
-
>
);
};
-export default GateMiddle;
+export default GateHUD;
diff --git a/src/components/GateScene/GateMiddleObject.tsx b/src/components/GateScene/GateMiddleObject.tsx
index b8d601f..e4f0c44 100644
--- a/src/components/GateScene/GateMiddleObject.tsx
+++ b/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();
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 = () => {
}
})}
-
+ 0}
+ rotation={[0, Math.PI / 2, 0]}
+ position={[0, 0, -0.4]}
+ />
+ 1}
+ rotation={[0, Math.PI / 2, 0]}
+ position={[0, 0, 0.5]}
+ />
+ 2}
+ position={[0.4, 0, 0.05]}
+ />
+ 3}
+ position={[-0.4, 0, 0.05]}
+ />
>
);
};
diff --git a/src/components/GateScene/GateMiddleObject/BlueOne.tsx b/src/components/GateScene/GateMiddleObject/BlueOne.tsx
index 82d120f..455cbf3 100644
--- a/src/components/GateScene/GateMiddleObject/BlueOne.tsx
+++ b/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}
>
diff --git a/src/components/GateScene/GateMiddleObject/BlueZero.tsx b/src/components/GateScene/GateMiddleObject/BlueZero.tsx
index f21c4c8..61b6cf9 100644
--- a/src/components/GateScene/GateMiddleObject/BlueZero.tsx
+++ b/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}
>
diff --git a/src/components/GateScene/GateMiddleObject/Mirror.tsx b/src/components/GateScene/GateMiddleObject/Mirror.tsx
index 66f1438..0ed8bba 100644
--- a/src/components/GateScene/GateMiddleObject/Mirror.tsx
+++ b/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(GLTFLoader, "models/gatePass.glb");
- const mirrorRef = useRef();
+ const mirrorGroupRef = useRef();
const materialRef = useRef();
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 (
<>
-
-
+
-
-
+
+
+
+
-
- {/**/}
- {/* */}
- {/**/}
>
);
};
diff --git a/src/scenes/GateScene.tsx b/src/scenes/GateScene.tsx
index 9903d96..26e4d1a 100644
--- a/src/scenes/GateScene.tsx
+++ b/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 (
-
+
+
);
};
diff --git a/src/store.ts b/src/store.ts
index 4eff20b..865c4ea 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -168,6 +168,11 @@ type MainMenuState = {
setActiveBootElement: (to: string) => void;
};
+type GateState = {
+ gateLvl: number;
+ incrementGateLvl: () => void;
+};
+
export const useTextRendererStore = create((set) => ({
// yellow text
yellowText: "Play",
@@ -389,12 +394,12 @@ export const useMediaWordStore = create((set) => ({
}));
export const useSceneStore = create((set) => ({
- currentScene: "boot",
+ currentScene: "gate",
setScene: (to) => set(() => ({ currentScene: to })),
}));
export const useSubsceneStore = create((set) => ({
- activeSubscene: "load_data",
+ activeSubscene: "authorize_user",
setActiveSubScene: (to) => set(() => ({ activeSubscene: to })),
}));
@@ -414,3 +419,8 @@ export const useImageStore = create(
})
)
);
+
+export const useGateStore = create((set) => ({
+ gateLvl: 4,
+ incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
+}));