mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
scene switching and dispose animation done
This commit is contained in:
parent
3dabc1a70f
commit
f27ab6d4f8
7 changed files with 161 additions and 105 deletions
|
@ -3,16 +3,29 @@ import * as THREE from "three";
|
|||
import PauseSquare from "./PauseSquare";
|
||||
import StaticBigLetter from "../TextRenderer/StaticBigLetter";
|
||||
import { usePauseStore } from "../../store";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
|
||||
const Pause = (props: { visible: boolean }) => {
|
||||
const [intro, setIntro] = useState(true);
|
||||
const [showActiveComponent, setShowActiveComponent] = useState(false);
|
||||
const [animation, setAnimation] = useState(false);
|
||||
const [intro, setIntro] = useState(true);
|
||||
|
||||
const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob");
|
||||
|
||||
const config = useMemo(
|
||||
() => ({
|
||||
font: wordFont,
|
||||
size: 2.5,
|
||||
}),
|
||||
[wordFont]
|
||||
);
|
||||
|
||||
const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
||||
const activeComponent = usePauseStore(
|
||||
useCallback(
|
||||
(state) => (intro ? "" : state.componentMatrix[componentMatrixIdx]),
|
||||
[componentMatrixIdx, intro]
|
||||
(state) =>
|
||||
showActiveComponent ? state.componentMatrix[componentMatrixIdx] : "",
|
||||
[componentMatrixIdx, showActiveComponent]
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -45,13 +58,21 @@ const Pause = (props: { visible: boolean }) => {
|
|||
setAnimation(true);
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
setShowActiveComponent(true);
|
||||
setIntro(false);
|
||||
}, 3000);
|
||||
}, 3500);
|
||||
}
|
||||
return () => {
|
||||
setTimeout(() => {
|
||||
setAnimation(false);
|
||||
setIntro(true);
|
||||
setShowActiveComponent(false);
|
||||
}, 700);
|
||||
};
|
||||
}, [props.visible]);
|
||||
|
||||
return animation ? (
|
||||
<group position={[-1, -0.8, 0]} scale={[0.9, 0.9, 0]}>
|
||||
<group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}>
|
||||
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
|
||||
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
|
||||
if (rowIdx === 5 && col > 0 && col < 5) {
|
||||
|
@ -67,6 +88,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
key={col}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
|
@ -74,6 +96,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
key={col}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
@ -83,6 +106,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
active={!(activeComponent === "load")}
|
||||
key={col}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 4 && col > 4 && col < 7) {
|
||||
|
@ -98,6 +122,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
key={col}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
|
@ -105,6 +130,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
key={col}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
@ -114,6 +140,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
active={!(activeComponent === "about")}
|
||||
key={col}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 3 && col > 2 && col < 7) {
|
||||
|
@ -129,6 +156,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
key={col}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
|
@ -136,6 +164,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
key={col}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
@ -145,6 +174,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
active={!(activeComponent === "change")}
|
||||
key={col}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 1 && col > 0 && col < 5) {
|
||||
|
@ -160,6 +190,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
key={col}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
|
@ -167,6 +198,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
key={col}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
@ -176,6 +208,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
active={!(activeComponent === "save")}
|
||||
key={col}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 0 && col > 4 && col < 7) {
|
||||
|
@ -191,6 +224,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
key={col}
|
||||
rowIdx={1}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
|
@ -198,6 +232,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
key={col}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
@ -207,6 +242,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
active={!(activeComponent === "exit")}
|
||||
key={col}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
|
@ -217,6 +253,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
colIdx={col}
|
||||
key={col}
|
||||
active={true}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -281,6 +318,33 @@ const Pause = (props: { visible: boolean }) => {
|
|||
active={activeComponent === "exit"}
|
||||
/>
|
||||
))}
|
||||
|
||||
<group visible={showActiveComponent}>
|
||||
<sprite position={[0.5, -0.8, 0]} scale={[3, 1, 0]} renderOrder={100}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
color={0x000000}
|
||||
opacity={0.8}
|
||||
depthTest={false}
|
||||
/>
|
||||
</sprite>
|
||||
<mesh
|
||||
scale={[0.08, 0.07, 0]}
|
||||
position={[-0.2, -0.6, 0]}
|
||||
renderOrder={101}
|
||||
>
|
||||
<textGeometry
|
||||
attach="geometry"
|
||||
args={["Application Version 1.0", config]}
|
||||
/>
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
color={0x00ba7c}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
</group>
|
||||
) : (
|
||||
<></>
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import React, { useMemo } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { CurveUtils } from "three";
|
||||
import { usePauseStore } from "../../store";
|
||||
|
||||
type PauseSquareProps = {
|
||||
|
@ -12,6 +11,7 @@ type PauseSquareProps = {
|
|||
geometry: THREE.PlaneBufferGeometry;
|
||||
active?: boolean;
|
||||
shouldDisappear?: boolean;
|
||||
intro?: boolean;
|
||||
};
|
||||
|
||||
const PauseSquare = (props: PauseSquareProps) => {
|
||||
|
@ -19,40 +19,6 @@ const PauseSquare = (props: PauseSquareProps) => {
|
|||
|
||||
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
|
||||
|
||||
const [intro, setIntro] = useState(true);
|
||||
const [introAnimToggle, setIntroAnimToggle] = useState(false);
|
||||
|
||||
const { introToggle } = useSpring({
|
||||
introToggle: Number(introAnimToggle),
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
const { toggle } = useSpring({
|
||||
toggle: Number(props.active),
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
const rotX = toggle.to([0, 1], [-Math.PI, exitAnimation ? 2.2 : 0]);
|
||||
const rotY = toggle.to([0, 1], [Math.PI / 2, exitAnimation ? 2.2 : 0]);
|
||||
|
||||
const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
|
||||
const introRotY = introToggle.to(
|
||||
[0, 1],
|
||||
[Math.PI, props.shouldDisappear ? Math.PI / 2 : 0]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
setIntroAnimToggle(true);
|
||||
}, (props.rowIdx + props.colIdx) * 100);
|
||||
|
||||
setTimeout(() => {
|
||||
setIntro(false);
|
||||
}, 1500);
|
||||
}, 500);
|
||||
}, [props.colIdx, props.rowIdx]);
|
||||
|
||||
const getExitAnimValue = useMemo(() => {
|
||||
let col, row;
|
||||
if (props.colIdx < 3) col = -1;
|
||||
|
@ -69,36 +35,79 @@ const PauseSquare = (props: PauseSquareProps) => {
|
|||
const initialState = useSpring({
|
||||
posX: props.colIdx / 2.8 + getExitAnimValue.col * (exitAnimation ? 2.2 : 0),
|
||||
posY: props.rowIdx / 2.8 + getExitAnimValue.row * (exitAnimation ? 2.2 : 0),
|
||||
rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI,
|
||||
rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2,
|
||||
rotZ: 0,
|
||||
from: { posX: 1.05, posY: 1.07, rotZ: -1 },
|
||||
config: { duration: 500 },
|
||||
});
|
||||
|
||||
const shadowState = useSpring({
|
||||
posX: props.colIdx / 2.8 + getExitAnimValue.col * (exitAnimation ? 2.2 : 0),
|
||||
posY: props.rowIdx / 2.8 + getExitAnimValue.row * (exitAnimation ? 2.2 : 0),
|
||||
rotX: exitAnimation ? Math.PI / 2 : 0,
|
||||
rotY: exitAnimation ? Math.PI / 2 : 0,
|
||||
from: { posX: 1.05, posY: 1.07, rotZ: -1 },
|
||||
config: { duration: 500 },
|
||||
});
|
||||
|
||||
const introState = useSpring({
|
||||
rotX: 0,
|
||||
rotY: props.shouldDisappear ? Math.PI / 2 : 0,
|
||||
from: { rotX: Math.PI, rotY: Math.PI },
|
||||
delay: (props.rowIdx + props.colIdx) * 100 + 500,
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
return (
|
||||
<a.mesh
|
||||
geometry={props.geometry}
|
||||
position-x={initialState.posX}
|
||||
position-y={initialState.posY}
|
||||
scale={[
|
||||
props.colIdx > 3 ? -0.25 : 0.25,
|
||||
props.rowIdx <= 3 ? -0.25 : 0.25,
|
||||
0,
|
||||
]}
|
||||
rotation-x={intro ? introRotX : rotX}
|
||||
rotation-y={intro ? introRotY : rotY}
|
||||
rotation-z={initialState.rotZ}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
map={grayBoxesTex}
|
||||
side={
|
||||
(props.colIdx > 3 && props.rowIdx <= 3) ||
|
||||
(props.colIdx <= 3 && props.rowIdx > 3)
|
||||
? THREE.FrontSide
|
||||
: THREE.BackSide
|
||||
}
|
||||
/>
|
||||
</a.mesh>
|
||||
<>
|
||||
<a.mesh
|
||||
geometry={props.geometry}
|
||||
position-x={initialState.posX}
|
||||
position-y={initialState.posY}
|
||||
scale={[
|
||||
props.colIdx > 3 ? -0.25 : 0.25,
|
||||
props.rowIdx <= 3 ? -0.25 : 0.25,
|
||||
0,
|
||||
]}
|
||||
rotation-x={props.intro ? introState.rotX : initialState.rotX}
|
||||
rotation-y={props.intro ? introState.rotY : initialState.rotY}
|
||||
rotation-z={initialState.rotZ}
|
||||
renderOrder={100}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
map={grayBoxesTex}
|
||||
side={
|
||||
(props.colIdx > 3 && props.rowIdx <= 3) ||
|
||||
(props.colIdx <= 3 && props.rowIdx > 3)
|
||||
? THREE.FrontSide
|
||||
: THREE.BackSide
|
||||
}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</a.mesh>
|
||||
<group scale={[0.9, 0.9, 0]} position={[0.1, 0.1, 0]}>
|
||||
<a.mesh
|
||||
geometry={props.geometry}
|
||||
position-x={shadowState.posX}
|
||||
position-y={shadowState.posY}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
rotation-x={shadowState.rotX}
|
||||
rotation-y={shadowState.rotY}
|
||||
rotation-z={initialState.rotZ}
|
||||
renderOrder={99}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
side={THREE.DoubleSide}
|
||||
transparent={true}
|
||||
color={0x1d1d2d}
|
||||
/>
|
||||
</a.mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@ import * as THREE from "three";
|
|||
import { useLoader } from "react-three-fiber";
|
||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import React, { useMemo } from "react";
|
||||
import { usePauseStore } from "../../store";
|
||||
|
||||
const StaticBigLetter = (props: {
|
||||
|
@ -17,6 +17,7 @@ const StaticBigLetter = (props: {
|
|||
active: boolean;
|
||||
rowIdx?: number;
|
||||
colIdx?: number;
|
||||
intro?: boolean;
|
||||
}) => {
|
||||
const exitAnimation = usePauseStore((state) => state.exitAnimation);
|
||||
|
||||
|
@ -96,11 +97,6 @@ const StaticBigLetter = (props: {
|
|||
return geometry;
|
||||
}, [letterData, lineYOffsets, props.letter]);
|
||||
|
||||
const { toggle } = useSpring({
|
||||
toggle: Number(props.active),
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
const getExitAnimValue = useMemo(() => {
|
||||
let col = 0;
|
||||
let row = 0;
|
||||
|
@ -115,34 +111,6 @@ const StaticBigLetter = (props: {
|
|||
}
|
||||
}, [props.colIdx, props.rowIdx]);
|
||||
|
||||
const rotX = toggle.to([0, 1], [-Math.PI, 0 + (exitAnimation ? 2.2 : 0)]);
|
||||
const rotY = toggle.to([0, 1], [Math.PI / 2, 0 + (exitAnimation ? 2.2 : 0)]);
|
||||
|
||||
const [intro, setIntro] = useState<boolean>(!!(props.rowIdx && props.colIdx));
|
||||
const [introAnimToggle, setIntroAnimToggle] = useState(false);
|
||||
|
||||
const { introToggle } = useSpring({
|
||||
introToggle: Number(introAnimToggle),
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
|
||||
const introRotY = introToggle.to([0, 1], [Math.PI * 2, 0]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (props.rowIdx && props.colIdx) {
|
||||
setTimeout(() => {
|
||||
setIntroAnimToggle(true);
|
||||
}, (props.rowIdx + props.colIdx) * 100);
|
||||
|
||||
setTimeout(() => {
|
||||
setIntro(false);
|
||||
}, 1500);
|
||||
}
|
||||
}, 500);
|
||||
}, [props.colIdx, props.rowIdx]);
|
||||
|
||||
const initialState = useSpring({
|
||||
posX:
|
||||
props.position[0] +
|
||||
|
@ -151,7 +119,17 @@ const StaticBigLetter = (props: {
|
|||
-letterData[4] / 50 +
|
||||
props.position[1] +
|
||||
(getExitAnimValue ? getExitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0),
|
||||
config: { duration: 800 },
|
||||
rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI,
|
||||
rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2,
|
||||
config: { duration: 500 },
|
||||
});
|
||||
|
||||
const introState = useSpring({
|
||||
rotX: 0,
|
||||
rotY: 0,
|
||||
from: { rotX: Math.PI, rotY: Math.PI * 2 },
|
||||
delay: (props.rowIdx! + props.colIdx!) * 100 + 500,
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
return (
|
||||
|
@ -165,14 +143,16 @@ const StaticBigLetter = (props: {
|
|||
position-y={initialState.posY}
|
||||
scale={props.scale as [number, number, number]}
|
||||
geometry={geom}
|
||||
rotation-x={intro ? introRotX : rotX}
|
||||
rotation-y={intro ? introRotY : rotY}
|
||||
rotation-x={props.intro ? introState.rotX : initialState.rotX}
|
||||
rotation-y={props.intro ? introState.rotY : initialState.rotY}
|
||||
renderOrder={100}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
map={colorTexture}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
side={THREE.FrontSide}
|
||||
depthTest={false}
|
||||
/>
|
||||
</a.mesh>
|
||||
);
|
||||
|
|
|
@ -87,7 +87,6 @@ const GreenTextManager = (props: StateManagerProps) => {
|
|||
value: [newActiveNodeId, newLevel],
|
||||
};
|
||||
case "toggle_level_selection":
|
||||
case "toggle_pause":
|
||||
return {
|
||||
action: toggleActive,
|
||||
};
|
||||
|
|
|
@ -57,7 +57,6 @@ const NodeHUDManager = (props: StateManagerProps) => {
|
|||
value: [targetNodeHudId],
|
||||
};
|
||||
case "toggle_level_selection":
|
||||
case "toggle_pause":
|
||||
return {
|
||||
action: toggleActive,
|
||||
};
|
||||
|
|
|
@ -22,6 +22,11 @@ const PauseComponentManager = (props: StateManagerProps) => {
|
|||
action: setExitAnimation,
|
||||
value: true,
|
||||
};
|
||||
case "toggle_pause":
|
||||
return {
|
||||
action: setExitAnimation,
|
||||
value: false,
|
||||
};
|
||||
}
|
||||
},
|
||||
[setComponentMatrixIdx, setExitAnimation]
|
||||
|
|
|
@ -53,7 +53,7 @@ const MainScene = () => {
|
|||
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
||||
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
||||
</a.group>
|
||||
{/*<Lain />*/}
|
||||
<Lain />
|
||||
</Suspense>
|
||||
</perspectiveCamera>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue