mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
rewriting boot scene in three
This commit is contained in:
parent
c698b097b8
commit
3e62072a7b
24 changed files with 241 additions and 294 deletions
|
@ -6,9 +6,10 @@ import { Canvas } from "react-three-fiber";
|
||||||
import Boot from "./components/Boot";
|
import Boot from "./components/Boot";
|
||||||
import MediaPlayer from "./components/MediaScene/MediaPlayer";
|
import MediaPlayer from "./components/MediaScene/MediaPlayer";
|
||||||
import MediaScene from "./scenes/MediaScene";
|
import MediaScene from "./scenes/MediaScene";
|
||||||
import EventManager from "./components/StateManagers/EventManager";
|
import EventManager from "./core/StateManagers/EventManager";
|
||||||
import { useSceneStore } from "./store";
|
import { useSceneStore } from "./store";
|
||||||
import GateScene from "./scenes/GateScene";
|
import GateScene from "./scenes/GateScene";
|
||||||
|
import BootScene from "./scenes/BootScene";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [moveToGame, setMoveToGame] = useState(false);
|
const [moveToGame, setMoveToGame] = useState(false);
|
||||||
|
@ -26,6 +27,7 @@ const App = () => {
|
||||||
main: <MainScene />,
|
main: <MainScene />,
|
||||||
media: <MediaScene />,
|
media: <MediaScene />,
|
||||||
gate: <GateScene />,
|
gate: <GateScene />,
|
||||||
|
boot: <BootScene />,
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
|
@ -1,286 +0,0 @@
|
||||||
import React, { useEffect, useState, useCallback } from "react";
|
|
||||||
|
|
||||||
import networkLogo from "../static/sprite/network_os_logo.png";
|
|
||||||
import introBox from "../static/sprite/gray_box.png";
|
|
||||||
import introTextBetween from "../static/sprite/intro_text_thing.png";
|
|
||||||
import introTextArrow from "../static/sprite/intro_text_arrow.png";
|
|
||||||
import mask from "../static/sprite/load_screen_mask.png";
|
|
||||||
import loop from "../static/sprite/loop.webp";
|
|
||||||
|
|
||||||
import "../static/css/intro.css";
|
|
||||||
|
|
||||||
// yes this thing is a mess ITS SUPPOSED TO BE MESSY OK
|
|
||||||
const FirstMarq: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
connect : Looking up host <br />
|
|
||||||
tachibana.cos
|
|
||||||
<br />
|
|
||||||
connect : Contacting host <br />
|
|
||||||
allen.la <br />
|
|
||||||
connect : host tachibana.cos <br /> contacted Waiting for reply <br />
|
|
||||||
Socket 172 connection with port <br /> number 2105 established <br />
|
|
||||||
Transfer Data from tachibana.cos <br />
|
|
||||||
Remote host closed socket
|
|
||||||
<br />
|
|
||||||
connect : Looking up host <br />
|
|
||||||
tachibana.cos
|
|
||||||
<br />
|
|
||||||
allen.la <br />
|
|
||||||
connect : host tachibana.cos <br /> contacted Waiting for reply <br />
|
|
||||||
connect : Contacting host <br />
|
|
||||||
Remote host closed socket Transfer Data from tachibana.cos <br />
|
|
||||||
Socket 172 connection with port <br /> number 2105 established <br />
|
|
||||||
connect : Looking up host <br />
|
|
||||||
tachibana.cos
|
|
||||||
<br />
|
|
||||||
allen.la <br />
|
|
||||||
connect : host tachibana.cos <br /> contacted Waiting for reply <br />
|
|
||||||
connect : Contacting host <br />
|
|
||||||
Remote host closed socket connect : host tachibana.cos <br /> contacted
|
|
||||||
Waiting for reply <br />
|
|
||||||
connect : Contacting host <br />
|
|
||||||
Transfer Data from tachibana.cos <br />
|
|
||||||
Socket 172 connection with port <br /> number 2105 established <br />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
type IntroProps = {
|
|
||||||
setMoveToGame: React.Dispatch<React.SetStateAction<boolean>>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Boot = (props: IntroProps) => {
|
|
||||||
const [looping, setLooping] = useState(true);
|
|
||||||
const [isArrowUp, setIsArrowUp] = useState(true);
|
|
||||||
|
|
||||||
const [loadStatusState, setLoadStatusState] = useState(<></>);
|
|
||||||
|
|
||||||
const [introFinished, setIntroFinished] = useState(false);
|
|
||||||
|
|
||||||
const [delayedMarqShown, setDelayedMarqShown] = useState(false);
|
|
||||||
|
|
||||||
const [authorizeActive, setAuthorizeActive] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
setLooping(false);
|
|
||||||
}, 1500);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setLoadStatusState(
|
|
||||||
<>
|
|
||||||
<div className="connect-container">connect : </div>
|
|
||||||
<div className="host-container">
|
|
||||||
host tachibana.cos <br /> contacted Waiting for reply
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}, 2500);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setLoadStatusState(
|
|
||||||
<>
|
|
||||||
Socket 172 connection with port <br /> number 2105 established
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}, 4500);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setLoadStatusState(<>Transfer Data from tachibana.cos</>);
|
|
||||||
}, 6500);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setLoadStatusState(<>Remote host closed socket</>);
|
|
||||||
}, 8500);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setIntroFinished(true);
|
|
||||||
}, 9500);
|
|
||||||
//9500
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setDelayedMarqShown(true);
|
|
||||||
}, 11900);
|
|
||||||
//11900
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const toggleArrowPos = () => {
|
|
||||||
if (Math.random() >= 0.5) setIsArrowUp(!isArrowUp);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleServerText = () => {
|
|
||||||
if (Math.random() >= 0.3)
|
|
||||||
setLoadStatusState(
|
|
||||||
<>
|
|
||||||
<div className="connect-container">connect : </div>
|
|
||||||
<div className="host-container">
|
|
||||||
Looking up host <br />
|
|
||||||
tachibana.cos
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (Math.random() >= 0.95)
|
|
||||||
setLoadStatusState(
|
|
||||||
<>
|
|
||||||
<div className="connect-container">connect : </div>
|
|
||||||
<div className="host-container">
|
|
||||||
Contacting host <br /> allen.lab
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const textInterval = setInterval(() => {
|
|
||||||
toggleArrowPos();
|
|
||||||
toggleServerText();
|
|
||||||
}, 50);
|
|
||||||
|
|
||||||
return () => clearInterval(textInterval);
|
|
||||||
}, [loadStatusState, isArrowUp]);
|
|
||||||
|
|
||||||
const handleUserKeyPress = useCallback(
|
|
||||||
(event) => {
|
|
||||||
const { keyCode } = event;
|
|
||||||
|
|
||||||
if (keyCode === 40 || keyCode === 38) {
|
|
||||||
setAuthorizeActive(!authorizeActive);
|
|
||||||
}
|
|
||||||
if (keyCode === 13) {
|
|
||||||
props.setMoveToGame(true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[authorizeActive]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
window.addEventListener("keydown", handleUserKeyPress);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener("keydown", handleUserKeyPress);
|
|
||||||
};
|
|
||||||
}, [handleUserKeyPress]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<p
|
|
||||||
className={
|
|
||||||
introFinished
|
|
||||||
? "first-marquee-text animate-text-marquee-first"
|
|
||||||
: "hidden"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<FirstMarq />
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
className={
|
|
||||||
delayedMarqShown
|
|
||||||
? "first-marquee-text animate-text-marquee-first"
|
|
||||||
: "hidden"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<FirstMarq />
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
introFinished
|
|
||||||
? "second-marquee-text animate-text-marquee-second"
|
|
||||||
: "hidden"
|
|
||||||
}
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
delayedMarqShown
|
|
||||||
? "second-marquee-text animate-text-marquee-second"
|
|
||||||
: "hidden"
|
|
||||||
}
|
|
||||||
></div>
|
|
||||||
{looping ? (
|
|
||||||
<div className="intro-loop">
|
|
||||||
<img alt="loop" src={loop}></img>
|
|
||||||
<p>
|
|
||||||
make
|
|
||||||
<br />
|
|
||||||
me
|
|
||||||
<br />
|
|
||||||
sad
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className={introFinished ? "hidden-fade-out-05s mask" : "mask"}>
|
|
||||||
<img alt="mask" src={mask} />
|
|
||||||
</div>
|
|
||||||
<div className="intro-load-screen">
|
|
||||||
<img
|
|
||||||
className={
|
|
||||||
introFinished ? "animate-to-top-right-1s logo" : "logo"
|
|
||||||
}
|
|
||||||
alt="logo"
|
|
||||||
src={networkLogo}
|
|
||||||
></img>
|
|
||||||
<h1 className={introFinished ? "authorize" : "hidden"}>
|
|
||||||
<span className={authorizeActive ? "active" : ""}>
|
|
||||||
Authorize User
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
<img
|
|
||||||
className={introFinished ? "animate-to-middle-1s box" : "box"}
|
|
||||||
alt="box"
|
|
||||||
src={introBox}
|
|
||||||
></img>
|
|
||||||
<h1 className={introFinished ? "load" : "hidden"}>
|
|
||||||
<span className={authorizeActive ? "" : "active"}>Load Data</span>
|
|
||||||
</h1>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
introFinished ? "hidden-fade-out-05s" : "box-background"
|
|
||||||
}
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
introFinished
|
|
||||||
? "text-container-left hidden-fade-out-05s"
|
|
||||||
: "text-container-left"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Copyright (C) dango factory
|
|
||||||
<br />
|
|
||||||
<img alt="between" src={introTextBetween}></img>
|
|
||||||
special thanks : myu-myu
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
introFinished
|
|
||||||
? "text-container-right hidden-fade-out-05s"
|
|
||||||
: "text-container-right"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="wrap-to-left">
|
|
||||||
<div className="arrow-container">
|
|
||||||
<img
|
|
||||||
style={{ transform: isArrowUp ? "translateY(-15px)" : "" }}
|
|
||||||
src={introTextArrow}
|
|
||||||
alt="arrow"
|
|
||||||
></img>
|
|
||||||
</div>
|
|
||||||
<div className="sevrer-container">
|
|
||||||
mISO-sevrer
|
|
||||||
<br />
|
|
||||||
sHIO-sevrer
|
|
||||||
</div>{" "}
|
|
||||||
<br />
|
|
||||||
{loadStatusState}
|
|
||||||
<br />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Boot;
|
|
37
src/components/Boot/BootAccela.tsx
Normal file
37
src/components/Boot/BootAccela.tsx
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import accelaBootSpriteSheet from "../../static/sprite/login_intro_accela_spritesheet.png";
|
||||||
|
import makeMeSad from "../../static/sprite/make_me_sad.png";
|
||||||
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
|
import * as THREE from "three";
|
||||||
|
import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
|
||||||
|
|
||||||
|
const BootAccela = () => {
|
||||||
|
const accelaBootTex: any = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
accelaBootSpriteSheet
|
||||||
|
);
|
||||||
|
const makeMeSadTex = useLoader(THREE.TextureLoader, makeMeSad);
|
||||||
|
|
||||||
|
const [animator] = useState(() => {
|
||||||
|
const anim = new PlainAnimator(accelaBootTex, 10, 3, 29, 60);
|
||||||
|
anim.init(0);
|
||||||
|
return anim;
|
||||||
|
});
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
animator.animate();
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<sprite scale={[0.35, 0.6, 0.35]} position={[0, 0.2, 0]}>
|
||||||
|
<spriteMaterial attach="material" map={accelaBootTex} />
|
||||||
|
</sprite>
|
||||||
|
<sprite scale={[0.4, 0.6, 0.4]} position={[0, -0.5, 0]}>
|
||||||
|
<spriteMaterial attach="material" map={makeMeSadTex} />
|
||||||
|
</sprite>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BootAccela;
|
181
src/components/Boot/BootAnimation.tsx
Normal file
181
src/components/Boot/BootAnimation.tsx
Normal file
|
@ -0,0 +1,181 @@
|
||||||
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import bootLof from "../../static/sprite/boot_lof.png";
|
||||||
|
import bootBottomBarLeft from "../../static/sprite/boot_bottom_bar_left.png";
|
||||||
|
import bootBottomBarRight from "../../static/sprite/boot_bottom_bar_right.png";
|
||||||
|
import bootPurpleSquare from "../../static/sprite/boot_purple_square.png";
|
||||||
|
import bootGraySquare from "../../static/sprite/boot_gray_square.png";
|
||||||
|
import bootDangoText from "../../static/sprite/dango_text.png";
|
||||||
|
import bootMisoShio from "../../static/sprite/miso_shio.png";
|
||||||
|
import bootArrows from "../../static/sprite/boot_arrows.png";
|
||||||
|
import bootStatusTexts from "../../static/sprite/boot_status_texts.png";
|
||||||
|
|
||||||
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
|
import { a, useSpring } from "@react-spring/three";
|
||||||
|
import * as THREE from "three";
|
||||||
|
|
||||||
|
const BootAnimation = () => {
|
||||||
|
const bootLofTex = useLoader(THREE.TextureLoader, bootLof);
|
||||||
|
const bootBottomBarLeftTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
bootBottomBarLeft
|
||||||
|
);
|
||||||
|
const bootBottomBarRightTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
bootBottomBarRight
|
||||||
|
);
|
||||||
|
const bootPurpleSquareTex = useLoader(THREE.TextureLoader, bootPurpleSquare);
|
||||||
|
const bootGraySquareTex = useLoader(THREE.TextureLoader, bootGraySquare);
|
||||||
|
const bootDangoTextTex = useLoader(THREE.TextureLoader, bootDangoText);
|
||||||
|
const bootMisoShioTex = useLoader(THREE.TextureLoader, bootMisoShio);
|
||||||
|
const bootArrowsTex = useLoader(THREE.TextureLoader, bootArrows);
|
||||||
|
const bootStatusTextsTex = useLoader(THREE.TextureLoader, bootStatusTexts);
|
||||||
|
|
||||||
|
const graySquareRef = useRef<THREE.SpriteMaterial>();
|
||||||
|
const arrowRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
if (graySquareRef.current) {
|
||||||
|
graySquareRef.current.rotation -= 0.1;
|
||||||
|
}
|
||||||
|
if (arrowRef.current && Date.now() % 5 === 0) {
|
||||||
|
arrowRef.current.position.y =
|
||||||
|
arrowRef.current.position.y === -1.04 ? -0.96 : -1.04;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentBootStatusTextTex = useMemo(() => {
|
||||||
|
bootStatusTextsTex.offset.y = 0.79;
|
||||||
|
bootStatusTextsTex.repeat.set(0.5, 0.2);
|
||||||
|
return bootStatusTextsTex;
|
||||||
|
}, [bootStatusTextsTex]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
currentBootStatusTextTex.offset.y = 0.528;
|
||||||
|
}, 900);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
currentBootStatusTextTex.offset.y = 0.79;
|
||||||
|
}, 1200);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
currentBootStatusTextTex.offset.y = 0.264;
|
||||||
|
}, 1500);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
currentBootStatusTextTex.offset.y = 0.79;
|
||||||
|
}, 1600);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
currentBootStatusTextTex.offset.x = 0.5;
|
||||||
|
currentBootStatusTextTex.offset.y = 0.264;
|
||||||
|
}, 2100);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
currentBootStatusTextTex.offset.x = 0;
|
||||||
|
currentBootStatusTextTex.offset.y = 0.005;
|
||||||
|
}, 2400);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
currentBootStatusTextTex.offset.y = 0.79;
|
||||||
|
}, 2500);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
currentBootStatusTextTex.offset.x = 0.5;
|
||||||
|
currentBootStatusTextTex.offset.y = 0.005;
|
||||||
|
setBootOpacity(0);
|
||||||
|
setGraySquarePosY(0);
|
||||||
|
setLofPosX(1.3);
|
||||||
|
setLofPosY(1);
|
||||||
|
}, 4000);
|
||||||
|
}, [currentBootStatusTextTex.offset]);
|
||||||
|
|
||||||
|
const [bootOpacity, setBootOpacity] = useState(1);
|
||||||
|
const [graySquarePosY, setGraySquarePosY] = useState(-0.8);
|
||||||
|
const [lofPosX, setLofPosX] = useState(0);
|
||||||
|
const [lofPosY, setLofPosY] = useState(0);
|
||||||
|
|
||||||
|
const bootState = useSpring({
|
||||||
|
bootOpacity: bootOpacity,
|
||||||
|
config: { duration: 300 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const positionState = useSpring({
|
||||||
|
graySquarePosY: graySquarePosY,
|
||||||
|
lofPosX: lofPosX,
|
||||||
|
lofPosY: lofPosY,
|
||||||
|
config: { duration: 600 },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<a.sprite
|
||||||
|
scale={[1.2, 0.4, 0]}
|
||||||
|
position-x={positionState.lofPosX}
|
||||||
|
position-y={positionState.lofPosY}
|
||||||
|
>
|
||||||
|
<spriteMaterial attach="material" map={bootLofTex} />
|
||||||
|
</a.sprite>
|
||||||
|
<sprite scale={[2.2, 0.66, 0]} position={[-1.1, -0.8, 0]}>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={bootBottomBarLeftTex}
|
||||||
|
opacity={bootState.bootOpacity}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite scale={[2.2, 0.66, 0]} position={[1.1, -0.8, 0]}>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={bootBottomBarRightTex}
|
||||||
|
opacity={bootState.bootOpacity}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite scale={[0.2, 0.2, 0]} position={[0, -0.8, 0]}>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={bootPurpleSquareTex}
|
||||||
|
opacity={bootState.bootOpacity}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite scale={[1.4, 0.5, 0]} position={[-1.2, -1.17, 0]}>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={bootDangoTextTex}
|
||||||
|
opacity={bootState.bootOpacity}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite scale={[0.6, 0.15, 0]} position={[0.9, -1, 0]}>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={bootMisoShioTex}
|
||||||
|
opacity={bootState.bootOpacity}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite scale={[0.12, 0.06, 0]} position={[0.5, -0.96, 0]} ref={arrowRef}>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={bootArrowsTex}
|
||||||
|
opacity={bootState.bootOpacity}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<sprite scale={[1.4, 0.2, 0]} position={[1.15, -1.2, 0]}>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={currentBootStatusTextTex}
|
||||||
|
opacity={bootState.bootOpacity}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<a.sprite scale={[0.2, 0.2, 0]} position-y={positionState.graySquarePosY}>
|
||||||
|
<spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={bootGraySquareTex}
|
||||||
|
ref={graySquareRef}
|
||||||
|
/>
|
||||||
|
</a.sprite>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BootAnimation;
|
|
@ -18,7 +18,7 @@ import MediaElementManager from "./MediaElementManager";
|
||||||
import SceneManager from "./SceneManager";
|
import SceneManager from "./SceneManager";
|
||||||
import YellowTextManager from "./YellowTextManager";
|
import YellowTextManager from "./YellowTextManager";
|
||||||
import MediaImageManager from "./MediaImageManager";
|
import MediaImageManager from "./MediaImageManager";
|
||||||
import computeAction from "../../core/computeAction";
|
import computeAction from "../computeAction";
|
||||||
import available_blue_orbs_on_projection from "../../resources/available_blue_orbs_on_projection.json";
|
import available_blue_orbs_on_projection from "../../resources/available_blue_orbs_on_projection.json";
|
||||||
import LevelManager from "./LevelManager";
|
import LevelManager from "./LevelManager";
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { GameContext } from "../components/StateManagers/EventManager";
|
import { GameContext } from "./StateManagers/EventManager";
|
||||||
import handleMainSceneEvent from "./mainSceneEventHandler";
|
import handleMainSceneEvent from "./mainSceneEventHandler";
|
||||||
import handleMediaSceneEvent from "./mediaSceneEventHandler";
|
import handleMediaSceneEvent from "./mediaSceneEventHandler";
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { GameContext } from "../components/StateManagers/EventManager";
|
import { GameContext } from "./StateManagers/EventManager";
|
||||||
import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json";
|
import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json";
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { GameContext } from "../components/StateManagers/EventManager";
|
import { GameContext } from "./StateManagers/EventManager";
|
||||||
|
|
||||||
const handleMediaSceneEvent = (gameContext: GameContext) => {
|
const handleMediaSceneEvent = (gameContext: GameContext) => {
|
||||||
const keyPress = gameContext.keyPress;
|
const keyPress = gameContext.keyPress;
|
||||||
|
|
13
src/scenes/BootScene.tsx
Normal file
13
src/scenes/BootScene.tsx
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
import React from "react";
|
||||||
|
import BootAccela from "../components/Boot/BootAccela";
|
||||||
|
import BootAnimation from "../components/Boot/BootAnimation";
|
||||||
|
|
||||||
|
const BootScene = () => {
|
||||||
|
return (
|
||||||
|
<perspectiveCamera position-z={3}>
|
||||||
|
{/*<BootAccela />*/}
|
||||||
|
<BootAnimation />
|
||||||
|
</perspectiveCamera>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default BootScene;
|
|
@ -6,10 +6,10 @@ import GateMiddle from "../components/GateScene/GateMiddle";
|
||||||
const GateScene = () => {
|
const GateScene = () => {
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<OrbitControls />
|
|
||||||
<pointLight intensity={5.2} color={0xffffff} position={[-2, 0, 0]} />
|
<pointLight intensity={5.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||||
|
<OrbitControls />
|
||||||
<GateSide />
|
<GateSide />
|
||||||
<GateMiddle/>
|
<GateMiddle />
|
||||||
</perspectiveCamera>
|
</perspectiveCamera>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -380,7 +380,7 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useSceneStore = create<SceneState>((set) => ({
|
export const useSceneStore = create<SceneState>((set) => ({
|
||||||
currentScene: "gate",
|
currentScene: "boot",
|
||||||
setScene: (to) => set(() => ({ currentScene: to })),
|
setScene: (to) => set(() => ({ currentScene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue