mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

basic animation done! gotta clean up and add some more details

Browse source
This commit is contained in:
ad044 2020-12-03 19:52:07 +04:00
parent 7db4906db1
commit e1813e83e0
3 changed files with 169 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
src/components/MainScene/Pause.tsx
View file

@ -1,15 +1,18 @@
import React, { useCallback, useMemo } from "react"; import React, { useCallback, useEffect, useMemo, useState } from "react";
import * as THREE from "three"; import * as THREE from "three";
import PauseSquare from "./PauseSquare"; import PauseSquare from "./PauseSquare";
import StaticBigLetter from "../TextRenderer/StaticBigLetter"; import StaticBigLetter from "../TextRenderer/StaticBigLetter";
import { usePauseStore } from "../../store"; import { usePauseStore } from "../../store";
const Pause = () => { const Pause = () => {
const [intro, setIntro] = useState(true);
const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx); const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
const activeComponent = usePauseStore( const activeComponent = usePauseStore(
useCallback((state) => state.componentMatrix[componentMatrixIdx], [ useCallback(
componentMatrixIdx, (state) => (intro ? "" : state.componentMatrix[componentMatrixIdx]),
]) [componentMatrixIdx, intro]
)
); );
const generateSqaureGeom = useCallback((row: number, square: number) => { const generateSqaureGeom = useCallback((row: number, square: number) => {
@ -35,21 +38,37 @@ const Pause = () => {
[generateSqaureGeom] [generateSqaureGeom]
); );
useEffect(() => {
setTimeout(() => {
setIntro(false);
}, 2000);
}, []);
return ( return (
<group position={[-1, -0.8, 0]} scale={[0.9, 0.9, 0]}> <group position={[-1, -0.8, 0]} scale={[0.9, 0.9, 0]}>
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) => {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
[0, 1, 2, 3, 4, 5, 6].map((col: number) => { [0, 1, 2, 3, 4, 5, 6].map((col: number) => {
if (rowIdx === 5 && col > 0 && col < 5) { if (rowIdx === 5 && col > 0 && col < 5) {
return col === 1 ? ( return col === 1 ? (
<StaticBigLetter <>
color={"white"} <StaticBigLetter
letter={"L"} color={"white"}
letterIdx={col} letter={"L"}
position={[0.35, 1.8, 0]} letterIdx={col}
scale={[0.25, 0.25, 0.25]} position={[0.35, 1.8, 0]}
active={!(activeComponent === "load")} scale={[0.25, 0.25, 0.25]}
key={col} active={!(activeComponent === "load")}
/> key={col}
rowIdx={rowIdx}
colIdx={col}
/>
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={col}
shouldDisappear={true}
/>
</>
) : ( ) : (
<PauseSquare <PauseSquare
geometry={squareGeoms[row][col]} geometry={squareGeoms[row][col]}
@ -61,15 +80,26 @@ const Pause = () => {
); );
} else if (rowIdx === 4 && col > 4 && col < 7) { } else if (rowIdx === 4 && col > 4 && col < 7) {
return col === 5 ? ( return col === 5 ? (
<StaticBigLetter <>
color={"white"} <StaticBigLetter
letter={"A"} color={"white"}
letterIdx={col} letter={"A"}
position={[1.78, 1.43, 0]} letterIdx={col}
scale={[0.25, 0.25, 0]} position={[1.78, 1.43, 0]}
active={!(activeComponent === "about")} scale={[0.25, 0.25, 0]}
key={col} active={!(activeComponent === "about")}
/> key={col}
rowIdx={rowIdx}
colIdx={col}
/>
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={col}
shouldDisappear={true}
/>
</>
) : ( ) : (
<PauseSquare <PauseSquare
geometry={squareGeoms[row][col]} geometry={squareGeoms[row][col]}
@ -81,15 +111,26 @@ const Pause = () => {
); );
} else if (rowIdx === 3 && col > 2 && col < 7) { } else if (rowIdx === 3 && col > 2 && col < 7) {
return col === 3 ? ( return col === 3 ? (
<StaticBigLetter <>
color={"white"} <StaticBigLetter
letter={"C"} color={"white"}
letterIdx={col} letter={"C"}
position={[1.05, 1.07, 0]} letterIdx={col}
scale={[0.25, 0.25, 0]} position={[1.05, 1.07, 0]}
active={!(activeComponent === "change")} scale={[0.25, 0.25, 0]}
key={col} active={!(activeComponent === "change")}
/> key={col}
rowIdx={rowIdx}
colIdx={col}
/>
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={col}
shouldDisappear={true}
/>
</>
) : ( ) : (
<PauseSquare <PauseSquare
geometry={squareGeoms[row][col]} geometry={squareGeoms[row][col]}
@ -101,15 +142,26 @@ const Pause = () => {
); );
} else if (rowIdx === 1 && col > 0 && col < 5) { } else if (rowIdx === 1 && col > 0 && col < 5) {
return col === 1 ? ( return col === 1 ? (
<StaticBigLetter <>
color={"white"} <StaticBigLetter
letter={"S"} color={"white"}
letterIdx={col} letter={"S"}
position={[0.35, 0.35, 0]} letterIdx={col}
scale={[0.25, 0.25, 0]} position={[0.35, 0.35, 0]}
active={!(activeComponent === "save")} scale={[0.25, 0.25, 0]}
key={col} active={!(activeComponent === "save")}
/> key={col}
rowIdx={rowIdx}
colIdx={col}
/>
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={col}
shouldDisappear={true}
/>
</>
) : ( ) : (
<PauseSquare <PauseSquare
geometry={squareGeoms[row][col]} geometry={squareGeoms[row][col]}
@ -121,15 +173,26 @@ const Pause = () => {
); );
} else if (rowIdx === 0 && col > 4 && col < 7) { } else if (rowIdx === 0 && col > 4 && col < 7) {
return col === 5 ? ( return col === 5 ? (
<StaticBigLetter <>
color={"white"} <StaticBigLetter
letter={"E"} color={"white"}
letterIdx={col} letter={"E"}
position={[1.78, 0, 0]} letterIdx={col}
scale={[0.25, 0.25, 0]} position={[1.78, 0, 0]}
active={!(activeComponent === "exit")} scale={[0.25, 0.25, 0]}
key={col} active={!(activeComponent === "exit")}
/> key={col}
rowIdx={1}
colIdx={col}
/>
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={col}
shouldDisappear={true}
/>
</>
) : ( ) : (
<PauseSquare <PauseSquare
geometry={squareGeoms[row][col]} geometry={squareGeoms[row][col]}

47
src/components/MainScene/PauseSquare.tsx
View file

@ -3,12 +3,14 @@ import * as THREE from "three";
import { useLoader } from "react-three-fiber"; import { useLoader } from "react-three-fiber";
import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png"; import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png";
import { a, useSpring } from "@react-spring/three"; import { a, useSpring } from "@react-spring/three";
import { CurveUtils } from "three";
type PauseSquareProps = { type PauseSquareProps = {
colIdx: number; colIdx: number;
rowIdx: number; rowIdx: number;
geometry: THREE.PlaneBufferGeometry; geometry: THREE.PlaneBufferGeometry;
active: boolean; active?: boolean;
shouldDisappear?: boolean;
}; };
const PauseSquare = (props: PauseSquareProps) => { const PauseSquare = (props: PauseSquareProps) => {
@ -30,37 +32,37 @@ const PauseSquare = (props: PauseSquareProps) => {
const rotX = toggle.to([0, 1], [-Math.PI, 0]); const rotX = toggle.to([0, 1], [-Math.PI, 0]);
const rotY = toggle.to([0, 1], [Math.PI / 2, 0]); const rotY = toggle.to([0, 1], [Math.PI / 2, 0]);
const introRotX = introToggle.to([0, 1], [0, 2 * Math.PI]); const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
const introRotY = introToggle.to([0, 1], [0, 2 * Math.PI]); const introRotY = introToggle.to(
[0, 1],
[Math.PI, props.shouldDisappear ? Math.PI / 2 : 0]
);
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setIntroAnimToggle(true); setTimeout(() => {
}, (props.rowIdx + props.colIdx) * 100); setIntroAnimToggle(true);
}, (props.rowIdx + props.colIdx) * 100);
setTimeout(() => { setTimeout(() => {
setIntro(false); setIntro(false);
}, 5000); }, 1500);
}, 500);
}, [props.colIdx, props.rowIdx]); }, [props.colIdx, props.rowIdx]);
const side = useMemo(() => { const initialState = useSpring({
if (intro) return THREE.DoubleSide; posX: props.colIdx / 2.8,
else { posY: props.rowIdx / 2.8,
if ( rotZ: 0,
(props.colIdx > 3 && props.rowIdx <= 3) || from: { posX: 1.05, posY: 1.07, rotZ: -1 },
(props.colIdx <= 3 && props.rowIdx > 3) config: { duration: 500 },
) { });
return THREE.FrontSide;
} else {
return THREE.BackSide;
}
}
}, [intro, props.colIdx, props.rowIdx]);
return ( return (
<a.mesh <a.mesh
geometry={props.geometry} geometry={props.geometry}
position={[props.colIdx / 2.8, props.rowIdx / 2.8, 0]} position-x={initialState.posX}
position-y={initialState.posY}
scale={[ scale={[
props.colIdx > 3 ? -0.25 : 0.25, props.colIdx > 3 ? -0.25 : 0.25,
props.rowIdx <= 3 ? -0.25 : 0.25, props.rowIdx <= 3 ? -0.25 : 0.25,
@ -68,6 +70,7 @@ const PauseSquare = (props: PauseSquareProps) => {
]} ]}
rotation-x={intro ? introRotX : rotX} rotation-x={intro ? introRotX : rotX}
rotation-y={intro ? introRotY : rotY} rotation-y={intro ? introRotY : rotY}
rotation-z={initialState.rotZ}
> >
<meshBasicMaterial <meshBasicMaterial
attach="material" attach="material"

36
src/components/TextRenderer/StaticBigLetter.tsx
View file

@ -4,8 +4,8 @@ import whiteFont from "../../static/sprite/white_and_green_texture.png";
import * as THREE from "three"; import * as THREE from "three";
import { useLoader } from "react-three-fiber"; import { useLoader } from "react-three-fiber";
import orange_font_json from "../../resources/font_data/big_font.json"; import orange_font_json from "../../resources/font_data/big_font.json";
import { a, Interpolation, SpringValue, useSpring } from "@react-spring/three"; import { a, useSpring } from "@react-spring/three";
import React, { useMemo } from "react"; import React, { useEffect, useMemo, useState } from "react";
const StaticBigLetter = (props: { const StaticBigLetter = (props: {
color: string; color: string;
@ -14,6 +14,8 @@ const StaticBigLetter = (props: {
position: number[]; position: number[];
scale: number[]; scale: number[];
active: boolean; active: boolean;
rowIdx?: number;
colIdx?: number;
}) => { }) => {
const { toggle } = useSpring({ const { toggle } = useSpring({
toggle: Number(props.active), toggle: Number(props.active),
@ -23,6 +25,17 @@ const StaticBigLetter = (props: {
const rotX = toggle.to([0, 1], [-Math.PI, 0]); const rotX = toggle.to([0, 1], [-Math.PI, 0]);
const rotY = toggle.to([0, 1], [Math.PI / 2, 0]); const rotY = toggle.to([0, 1], [Math.PI / 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]);
const colorToTexture = (color: string) => { const colorToTexture = (color: string) => {
const colorTexture = { const colorTexture = {
orange: orangeFont, orange: orangeFont,
@ -99,6 +112,20 @@ const StaticBigLetter = (props: {
return geometry; return geometry;
}, [letterData, lineYOffsets, props.letter]); }, [letterData, lineYOffsets, props.letter]);
useEffect(() => {
setTimeout(() => {
if (props.rowIdx && props.colIdx) {
setTimeout(() => {
setIntroAnimToggle(true);
}, (props.rowIdx + props.colIdx) * 100);
setTimeout(() => {
setIntro(false);
}, 1500);
}
}, 500);
}, [props.colIdx, props.rowIdx]);
return ( return (
<a.mesh <a.mesh
position={[ position={[
@ -108,13 +135,14 @@ const StaticBigLetter = (props: {
]} ]}
scale={props.scale as [number, number, number]} scale={props.scale as [number, number, number]}
geometry={geom} geometry={geom}
rotation-x={rotX} rotation-x={intro ? introRotX : rotX}
rotation-y={rotY} rotation-y={intro ? introRotY : rotY}
> >
<meshBasicMaterial <meshBasicMaterial
map={colorTexture} map={colorTexture}
attach="material" attach="material"
transparent={true} transparent={true}
side={THREE.FrontSide}
/> />
</a.mesh> </a.mesh>
); );