mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
gate scene done
This commit is contained in:
parent
e42b79f6df
commit
f5b214b79d
9 changed files with 89 additions and 33 deletions
Binary file not shown.
|
@ -1,13 +1,12 @@
|
|||
import React from "react";
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import gateText from "../../static/sprite/gate_pass.png";
|
||||
import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
|
||||
import gateTextAccessPass from "../../static/sprite/you_got_an_access_pass.png";
|
||||
import changeSiteEnable from "../../static/sprite/change_site_enable.png";
|
||||
import gateLeftThing from "../../static/sprite/left_gate_thing.png";
|
||||
import gateRightThing from "../../static/sprite/right_gate_thing.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import GateMiddleObject from "./GateMiddleObject";
|
||||
|
||||
type GateMiddleProps = {
|
||||
intro: boolean;
|
||||
|
@ -15,6 +14,15 @@ type GateMiddleProps = {
|
|||
};
|
||||
|
||||
const GateHUD = (props: GateMiddleProps) => {
|
||||
const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob");
|
||||
const config = useMemo(
|
||||
() => ({
|
||||
font: wordFont,
|
||||
size: 1,
|
||||
}),
|
||||
[wordFont]
|
||||
);
|
||||
|
||||
const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
|
||||
const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
|
||||
const gateAccessPassTexture = useLoader(
|
||||
|
@ -29,6 +37,16 @@ const GateHUD = (props: GateMiddleProps) => {
|
|||
const gateLeftThingTexture = useLoader(THREE.TextureLoader, gateLeftThing);
|
||||
const gateRightThingTexture = useLoader(THREE.TextureLoader, gateRightThing);
|
||||
|
||||
const pressAnyRef = useRef<THREE.Object3D>();
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => {
|
||||
if (pressAnyRef.current && !props.intro) {
|
||||
pressAnyRef.current.visible = !pressAnyRef.current.visible;
|
||||
}
|
||||
}, 500);
|
||||
}, [props.intro]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<sprite scale={[1.5, 0.24, 0]} position={[0, 1.1, 0.07]} renderOrder={3}>
|
||||
|
@ -110,6 +128,35 @@ const GateHUD = (props: GateMiddleProps) => {
|
|||
visible={!props.intro && props.gateLvl === 4}
|
||||
/>
|
||||
</sprite>
|
||||
|
||||
<group ref={pressAnyRef} visible={false}>
|
||||
<mesh
|
||||
scale={[0.17, 0.14, 0]}
|
||||
position={[-0.8, -1.3, 0]}
|
||||
renderOrder={5}
|
||||
>
|
||||
<textGeometry attach="geometry" args={["press ANY button", config]} />
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
color={0xdb9200}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh
|
||||
scale={[0.17, 0.14, 0]}
|
||||
position={[-0.793, -1.308, 0]}
|
||||
renderOrder={4}
|
||||
>
|
||||
<textGeometry attach="geometry" args={["press ANY button", config]} />
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
color={0xad7400}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -36,7 +36,7 @@ const Mirror = (props: MirrorProps) => {
|
|||
mirrorGroupRef.current.rotation.y -= 0.03;
|
||||
}
|
||||
if (materialRef.current) {
|
||||
tex.offset.y -= 0.01;
|
||||
tex.offset.x -= 0.0025;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import blueBinary from "../../static/sprite/blue_binary.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
@ -15,11 +15,13 @@ const GateSide = () => {
|
|||
return blueBinaryTex;
|
||||
}, [blueBinaryTex]);
|
||||
|
||||
useFrame(() => {
|
||||
if (Date.now() % 2 === 0 && matRef.current) {
|
||||
useEffect(() => {
|
||||
setInterval(() => {
|
||||
if (matRef.current) {
|
||||
matRef.current.uniforms.offset.value += 0.5;
|
||||
}
|
||||
});
|
||||
}, 50);
|
||||
}, []);
|
||||
|
||||
const matRef = useRef<THREE.ShaderMaterial>();
|
||||
|
||||
|
@ -48,11 +50,11 @@ const GateSide = () => {
|
|||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
float alpha = smoothstep(0.7, 1.0, vUv.x);
|
||||
float alpha = smoothstep(0.9, 1.0, vUv.x);
|
||||
|
||||
vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
|
||||
|
||||
gl_FragColor = mix(t1, vec4(0,0,0,0), alpha);
|
||||
gl_FragColor = mix(t1, vec4(0,0,0,0), alpha) * 0.8;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -64,21 +66,21 @@ const GateSide = () => {
|
|||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
float alpha = smoothstep(0.3, 1.0, vUv.x);
|
||||
float alpha = smoothstep(1.0, 0.9, vUv.x);
|
||||
|
||||
vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
|
||||
|
||||
gl_FragColor = mix(vec4(0,0,0,0), t1, alpha) * 1.4;
|
||||
gl_FragColor = mix(vec4(0,0,0,0), t1, alpha) * 0.8;
|
||||
}
|
||||
`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<OrbitControls />
|
||||
<mesh
|
||||
rotation={[0, 0.2, 0]}
|
||||
position={[-1.4, 0, 1.5]}
|
||||
position={[-1.7, 0, 1.5]}
|
||||
scale={[3, 1.5, 0]}
|
||||
renderOrder={1}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||
<shaderMaterial
|
||||
|
@ -92,8 +94,9 @@ const GateSide = () => {
|
|||
</mesh>
|
||||
<mesh
|
||||
rotation={[0, -0.2, 0]}
|
||||
position={[0.05, 0, 1.3]}
|
||||
scale={[3, 1.5, 0]}
|
||||
position={[1.7, 0, 1.5]}
|
||||
scale={[-3, 1.5, 0]}
|
||||
renderOrder={1}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||
<shaderMaterial
|
||||
|
@ -103,6 +106,7 @@ const GateSide = () => {
|
|||
fragmentShader={fragmentShaderRight}
|
||||
transparent={true}
|
||||
ref={matRef}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</mesh>
|
||||
</>
|
||||
|
|
|
@ -81,23 +81,23 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
|||
action: setActiveMediaComponent,
|
||||
value: "play",
|
||||
},
|
||||
switch_to_right_side_from_play: {
|
||||
play_right: {
|
||||
action: switchToRightSide,
|
||||
value: "play",
|
||||
},
|
||||
switch_to_right_side_from_exit: {
|
||||
exit_right: {
|
||||
action: switchToRightSide,
|
||||
value: "exit",
|
||||
},
|
||||
switch_to_left_side_from_fstWord: {
|
||||
fstWord_left: {
|
||||
action: switchToLeftSide,
|
||||
value: "fstWord",
|
||||
},
|
||||
switch_to_left_side_from_sndWord: {
|
||||
sndWord_left: {
|
||||
action: switchToLeftSide,
|
||||
value: "sndWord",
|
||||
},
|
||||
switch_to_left_side_from_thirdWord: {
|
||||
thirdWord_left: {
|
||||
action: switchToLeftSide,
|
||||
value: "thirdWord",
|
||||
},
|
||||
|
|
|
@ -20,7 +20,12 @@ const SceneManager = (props: StateManagerProps) => {
|
|||
},
|
||||
exit_select: {
|
||||
action: setScene,
|
||||
value: newScene,
|
||||
value: "main",
|
||||
delay: 0,
|
||||
},
|
||||
exit_gate: {
|
||||
action: setScene,
|
||||
value: "main",
|
||||
delay: 0,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -2,6 +2,7 @@ import { GameContext } from "./StateManagers/EventManager";
|
|||
import handleMainSceneEvent from "./mainSceneEventHandler";
|
||||
import handleMediaSceneEvent from "./mediaSceneEventHandler";
|
||||
import handleBootMainMenuEvent from "./bootEventHandler";
|
||||
import handleGateSceneEvent from "./gateSceneEventHandler";
|
||||
|
||||
const computeAction = (gameContext: GameContext) => {
|
||||
switch (gameContext.scene) {
|
||||
|
@ -11,6 +12,8 @@ const computeAction = (gameContext: GameContext) => {
|
|||
return handleMediaSceneEvent(gameContext);
|
||||
case "boot":
|
||||
return handleBootMainMenuEvent(gameContext);
|
||||
case "gate":
|
||||
return handleGateSceneEvent();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
5
src/core/gateSceneEventHandler.ts
Normal file
5
src/core/gateSceneEventHandler.ts
Normal file
|
@ -0,0 +1,5 @@
|
|||
import { GameContext } from "./StateManagers/EventManager";
|
||||
|
||||
const handleGateSceneEvent = () => ({ event: "exit_gate" });
|
||||
|
||||
export default handleGateSceneEvent;
|
|
@ -2,16 +2,8 @@ import { GameContext } from "./StateManagers/EventManager";
|
|||
|
||||
const handleMediaSceneEvent = (gameContext: GameContext) => {
|
||||
const keyPress = gameContext.keyPress;
|
||||
|
||||
const activeMediaComponent = gameContext.activeMediaComponent;
|
||||
switch (keyPress) {
|
||||
case "right":
|
||||
return { event: `switch_to_right_side_from_${activeMediaComponent}` };
|
||||
case "left":
|
||||
return { event: `switch_to_left_side_from_${activeMediaComponent}` };
|
||||
default:
|
||||
return { event: `${activeMediaComponent}_${keyPress}`, newScene: "main" };
|
||||
}
|
||||
return { event: `${activeMediaComponent}_${keyPress}` };
|
||||
};
|
||||
|
||||
export default handleMediaSceneEvent;
|
||||
|
|
Loading…
Reference in a new issue