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 yellowFont from "../../static/sprite/yellow_font_texture.png";
|
||||
import whiteFont from "../../static/sprite/white_and_green_texture.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||
|
@ -13,7 +14,11 @@ const BigLetter = (props: {
|
|||
yellowTextOffsetXCoeff: number;
|
||||
}) => {
|
||||
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];
|
||||
};
|
||||
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
"d": [64, 34, 11, 14, 0],
|
||||
"e": [76, 34, 12, 14, 0],
|
||||
"f": [90, 34, 9, 14, 3],
|
||||
"g": [100, 34, 11, 17, 0],
|
||||
"g": [100, 34, 11, 14, 4],
|
||||
"h": [112, 34, 11, 14, 0],
|
||||
"i": [123, 34, 7, 14, 0],
|
||||
"j": [132, 34, 7, 17, 3],
|
||||
|
|
|
@ -15,6 +15,7 @@ import YellowOrb from "../components/MainScene/YellowOrb";
|
|||
import ActiveLevelNodes from "../components/MainScene/ActiveLevelNodes";
|
||||
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
||||
import LevelSelection from "../components/MainScene/LevelSelection";
|
||||
import Pause from "../components/MainScene/Pause";
|
||||
|
||||
const MainScene = () => {
|
||||
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
||||
|
@ -34,24 +35,25 @@ const MainScene = () => {
|
|||
<Suspense fallback={null}>
|
||||
<MainSceneIntro />
|
||||
<a.group>
|
||||
<Preloader />
|
||||
<Site />
|
||||
{/*<Preloader />*/}
|
||||
{/*<Site />*/}
|
||||
{/*<ActiveLevelNodes />*/}
|
||||
<HUD visible={!isPaused} />
|
||||
<GreenTextRenderer visible={!isPaused} />
|
||||
<YellowTextRenderer visible={!isPaused} />
|
||||
<YellowOrb visible={!isPaused} />
|
||||
{/*<HUD visible={!isPaused} />*/}
|
||||
{/*<GreenTextRenderer visible={!isPaused} />*/}
|
||||
{/*<YellowTextRenderer visible={!isPaused} />*/}
|
||||
{/*<YellowOrb visible={!isPaused} />*/}
|
||||
{/*<Starfield />*/}
|
||||
<GrayPlanes visible={!isPaused} />
|
||||
<MiddleRing />
|
||||
<LevelSelection />
|
||||
{/*<GrayPlanes visible={!isPaused} />*/}
|
||||
{/*<MiddleRing />*/}
|
||||
{/*<LevelSelection />*/}
|
||||
{/*<OrbitControls />*/}
|
||||
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
||||
<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} />
|
||||
<Pause />
|
||||
</a.group>
|
||||
<Lain />
|
||||
{/*<Lain />*/}
|
||||
</Suspense>
|
||||
</perspectiveCamera>
|
||||
);
|
||||
|
|
|
@ -469,3 +469,5 @@ export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
|
|||
levelSelectionToggled: Number(!state.levelSelectionToggled),
|
||||
})),
|
||||
}));
|
||||
|
||||
export const usePauseStore = create<any>((set) => ({}));
|
||||
|
|
Loading…
Reference in a new issue