mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
pause scene squares partly added
This commit is contained in:
parent
db396e62ee
commit
00ffcdc710
5 changed files with 203 additions and 12 deletions
182
src/components/MainScene/Pause.tsx
Normal file
182
src/components/MainScene/Pause.tsx
Normal file
|
@ -0,0 +1,182 @@
|
||||||
|
import React, { useCallback, useMemo, useRef, useState } from "react";
|
||||||
|
import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png";
|
||||||
|
import * as THREE from "three";
|
||||||
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
|
import BigLetter from "../TextRenderer/BigLetter";
|
||||||
|
|
||||||
|
const Pause = () => {
|
||||||
|
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
|
||||||
|
|
||||||
|
const generateSqaureGeom = useCallback((row: number, square: number) => {
|
||||||
|
const geometry = new THREE.PlaneBufferGeometry();
|
||||||
|
const uvAttribute = geometry.attributes.uv;
|
||||||
|
|
||||||
|
for (let i = 0; i < uvAttribute.count; i++) {
|
||||||
|
let u = uvAttribute.getX(i);
|
||||||
|
let v = uvAttribute.getY(i);
|
||||||
|
|
||||||
|
u = (u * 16) / 256 + (row * 64) / 256 + (square * 16) / 256;
|
||||||
|
|
||||||
|
uvAttribute.setXY(i, u, v);
|
||||||
|
}
|
||||||
|
return geometry;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const squareGeoms = useMemo(
|
||||||
|
() =>
|
||||||
|
[0, 1, 2, 3].map((row: number) =>
|
||||||
|
[0, 1, 2, 3, 2, 1, 0].map((col: number) => generateSqaureGeom(row, col))
|
||||||
|
),
|
||||||
|
[generateSqaureGeom]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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, 4, 5, 6].map((col: number) => {
|
||||||
|
if (rowIdx === 5 && col > 0) {
|
||||||
|
return col === 1 ? (
|
||||||
|
<>
|
||||||
|
<group scale={[0.2, 0.2, 0]} position={[0.1, 1.8, 0]}>
|
||||||
|
<BigLetter
|
||||||
|
color={"white"}
|
||||||
|
letter={"L"}
|
||||||
|
letterIdx={col}
|
||||||
|
yellowTextOffsetXCoeff={col / 7}
|
||||||
|
key={col}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
)
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<mesh
|
||||||
|
geometry={squareGeoms[row][col]}
|
||||||
|
position={[col / 2.8, rowIdx / 2.8, 0]}
|
||||||
|
scale={[col > 3 ? -0.25 : 0.25, rowIdx <= 3 ? -0.25 : 0.25, 0]}
|
||||||
|
key={col}
|
||||||
|
>
|
||||||
|
<meshBasicMaterial
|
||||||
|
attach="material"
|
||||||
|
map={grayBoxesTex}
|
||||||
|
side={
|
||||||
|
(col > 3 && rowIdx <= 3) || (col <= 3 && rowIdx > 3)
|
||||||
|
? THREE.FrontSide
|
||||||
|
: THREE.BackSide
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
);
|
||||||
|
} else if (rowIdx === 4 && col === 4) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<group scale={[0.2, 0.2, 0]} position={[0.1, 1.45, 0]}>
|
||||||
|
<BigLetter
|
||||||
|
color={"white"}
|
||||||
|
letter={"A"}
|
||||||
|
letterIdx={col}
|
||||||
|
yellowTextOffsetXCoeff={col / 7}
|
||||||
|
key={col}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
} else if (rowIdx === 3 && col === 3) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<group scale={[0.2, 0.2, 0]} position={[0.12, 1.05, 0]}>
|
||||||
|
<BigLetter
|
||||||
|
color={"white"}
|
||||||
|
letter={"C"}
|
||||||
|
letterIdx={col}
|
||||||
|
yellowTextOffsetXCoeff={col / 7}
|
||||||
|
key={col}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<mesh
|
||||||
|
geometry={squareGeoms[row][col]}
|
||||||
|
position={[col / 2.8, rowIdx / 2.8, 0]}
|
||||||
|
scale={[col > 3 ? -0.25 : 0.25, rowIdx <= 3 ? -0.25 : 0.25, 0]}
|
||||||
|
key={col}
|
||||||
|
>
|
||||||
|
<meshBasicMaterial
|
||||||
|
attach="material"
|
||||||
|
map={grayBoxesTex}
|
||||||
|
side={
|
||||||
|
(col > 3 && rowIdx <= 3) || (col <= 3 && rowIdx > 3)
|
||||||
|
? THREE.FrontSide
|
||||||
|
: THREE.BackSide
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
{/*{"Load".split("").map((letter, idx) => (*/}
|
||||||
|
{/* <group scale={[0.2, 0.2, 0]} position={[0.35 + idx / 8, 1.8, 0]}>*/}
|
||||||
|
{/* <BigLetter*/}
|
||||||
|
{/* color={idx > 0 ? "yellow" : "orange"}*/}
|
||||||
|
{/* letter={letter}*/}
|
||||||
|
{/* letterIdx={idx}*/}
|
||||||
|
{/* yellowTextOffsetXCoeff={0}*/}
|
||||||
|
{/* key={idx}*/}
|
||||||
|
{/* />*/}
|
||||||
|
{/* </group>*/}
|
||||||
|
{/*))}*/}
|
||||||
|
|
||||||
|
{/*{"About".split("").map((letter, idx) => (*/}
|
||||||
|
{/* <group scale={[0.2, 0.2, 0]} position={[1.4 + idx / 8, 1.45, 0]}>*/}
|
||||||
|
{/* <BigLetter*/}
|
||||||
|
{/* color={idx > 0 ? "yellow" : "orange"}*/}
|
||||||
|
{/* letter={letter}*/}
|
||||||
|
{/* letterIdx={idx}*/}
|
||||||
|
{/* yellowTextOffsetXCoeff={0}*/}
|
||||||
|
{/* key={idx}*/}
|
||||||
|
{/* />*/}
|
||||||
|
{/* </group>*/}
|
||||||
|
{/*))}*/}
|
||||||
|
|
||||||
|
{/*{"Change".split("").map((letter, idx) => (*/}
|
||||||
|
{/* <group scale={[0.2, 0.2, 0]} position={[1 + idx / 6, 1.05, 0]}>*/}
|
||||||
|
{/* <BigLetter*/}
|
||||||
|
{/* color={idx > 0 ? "yellow" : "orange"}*/}
|
||||||
|
{/* letter={letter}*/}
|
||||||
|
{/* letterIdx={idx}*/}
|
||||||
|
{/* yellowTextOffsetXCoeff={0}*/}
|
||||||
|
{/* key={idx}*/}
|
||||||
|
{/* />*/}
|
||||||
|
{/* </group>*/}
|
||||||
|
{/*))}*/}
|
||||||
|
|
||||||
|
{/*{"Save".split("").map((letter, idx) => (*/}
|
||||||
|
{/* <group scale={[0.2, 0.2, 0]} position={[0.3 + idx / 7, 0.35, 0]}>*/}
|
||||||
|
{/* <BigLetter*/}
|
||||||
|
{/* color={idx > 0 ? "yellow" : "orange"}*/}
|
||||||
|
{/* letter={letter}*/}
|
||||||
|
{/* letterIdx={idx}*/}
|
||||||
|
{/* yellowTextOffsetXCoeff={0}*/}
|
||||||
|
{/* key={idx}*/}
|
||||||
|
{/* />*/}
|
||||||
|
{/* </group>*/}
|
||||||
|
{/*))}*/}
|
||||||
|
|
||||||
|
{/*{"Exit".split("").map((letter, idx) => (*/}
|
||||||
|
{/* <group scale={[0.2, 0.2, 0]} position={[1.75 + idx / 8, 0, 0]}>*/}
|
||||||
|
{/* <BigLetter*/}
|
||||||
|
{/* color={idx > 0 ? "yellow" : "orange"}*/}
|
||||||
|
{/* letter={letter}*/}
|
||||||
|
{/* letterIdx={idx}*/}
|
||||||
|
{/* yellowTextOffsetXCoeff={0}*/}
|
||||||
|
{/* key={idx}*/}
|
||||||
|
{/* />*/}
|
||||||
|
{/* </group>*/}
|
||||||
|
{/*))}*/}
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Pause;
|
|
@ -1,5 +1,6 @@
|
||||||
import orangeFont from "../../static/sprite/orange_font_texture.png";
|
import orangeFont from "../../static/sprite/orange_font_texture.png";
|
||||||
import yellowFont from "../../static/sprite/yellow_font_texture.png";
|
import yellowFont from "../../static/sprite/yellow_font_texture.png";
|
||||||
|
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";
|
||||||
|
@ -13,7 +14,11 @@ const BigLetter = (props: {
|
||||||
yellowTextOffsetXCoeff: number;
|
yellowTextOffsetXCoeff: number;
|
||||||
}) => {
|
}) => {
|
||||||
const colorToTexture = (color: string) => {
|
const colorToTexture = (color: string) => {
|
||||||
const colorTexture = { orange: orangeFont, yellow: yellowFont };
|
const colorTexture = {
|
||||||
|
orange: orangeFont,
|
||||||
|
yellow: yellowFont,
|
||||||
|
white: whiteFont,
|
||||||
|
};
|
||||||
return colorTexture[color as keyof typeof colorTexture];
|
return colorTexture[color as keyof typeof colorTexture];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -45,7 +45,7 @@
|
||||||
"d": [64, 34, 11, 14, 0],
|
"d": [64, 34, 11, 14, 0],
|
||||||
"e": [76, 34, 12, 14, 0],
|
"e": [76, 34, 12, 14, 0],
|
||||||
"f": [90, 34, 9, 14, 3],
|
"f": [90, 34, 9, 14, 3],
|
||||||
"g": [100, 34, 11, 17, 0],
|
"g": [100, 34, 11, 14, 4],
|
||||||
"h": [112, 34, 11, 14, 0],
|
"h": [112, 34, 11, 14, 0],
|
||||||
"i": [123, 34, 7, 14, 0],
|
"i": [123, 34, 7, 14, 0],
|
||||||
"j": [132, 34, 7, 17, 3],
|
"j": [132, 34, 7, 17, 3],
|
||||||
|
|
|
@ -15,6 +15,7 @@ import YellowOrb from "../components/MainScene/YellowOrb";
|
||||||
import ActiveLevelNodes from "../components/MainScene/ActiveLevelNodes";
|
import ActiveLevelNodes from "../components/MainScene/ActiveLevelNodes";
|
||||||
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
||||||
import LevelSelection from "../components/MainScene/LevelSelection";
|
import LevelSelection from "../components/MainScene/LevelSelection";
|
||||||
|
import Pause from "../components/MainScene/Pause";
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
||||||
|
@ -34,24 +35,25 @@ const MainScene = () => {
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<MainSceneIntro />
|
<MainSceneIntro />
|
||||||
<a.group>
|
<a.group>
|
||||||
<Preloader />
|
{/*<Preloader />*/}
|
||||||
<Site />
|
{/*<Site />*/}
|
||||||
{/*<ActiveLevelNodes />*/}
|
{/*<ActiveLevelNodes />*/}
|
||||||
<HUD visible={!isPaused} />
|
{/*<HUD visible={!isPaused} />*/}
|
||||||
<GreenTextRenderer visible={!isPaused} />
|
{/*<GreenTextRenderer visible={!isPaused} />*/}
|
||||||
<YellowTextRenderer visible={!isPaused} />
|
{/*<YellowTextRenderer visible={!isPaused} />*/}
|
||||||
<YellowOrb visible={!isPaused} />
|
{/*<YellowOrb visible={!isPaused} />*/}
|
||||||
{/*<Starfield />*/}
|
{/*<Starfield />*/}
|
||||||
<GrayPlanes visible={!isPaused} />
|
{/*<GrayPlanes visible={!isPaused} />*/}
|
||||||
<MiddleRing />
|
{/*<MiddleRing />*/}
|
||||||
<LevelSelection />
|
{/*<LevelSelection />*/}
|
||||||
{/*<OrbitControls />*/}
|
{/*<OrbitControls />*/}
|
||||||
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
||||||
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
|
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
|
||||||
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
||||||
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
||||||
|
<Pause />
|
||||||
</a.group>
|
</a.group>
|
||||||
<Lain />
|
{/*<Lain />*/}
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</perspectiveCamera>
|
</perspectiveCamera>
|
||||||
);
|
);
|
||||||
|
|
|
@ -469,3 +469,5 @@ export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
|
||||||
levelSelectionToggled: Number(!state.levelSelectionToggled),
|
levelSelectionToggled: Number(!state.levelSelectionToggled),
|
||||||
})),
|
})),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
export const usePauseStore = create<any>((set) => ({}));
|
||||||
|
|
Loading…
Reference in a new issue