mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
code improvmeents wip
This commit is contained in:
parent
c6040ba5cb
commit
34ec928099
9 changed files with 183 additions and 122 deletions
|
@ -13,6 +13,7 @@ import PolytanScene from "./scenes/PolytanScene";
|
|||
import TaKScene from "./scenes/TaKScene";
|
||||
import ChangeDiscScene from "./scenes/ChangeDiscScene";
|
||||
import EndScene from "./scenes/EndScene";
|
||||
import IdleMediaScene from "./scenes/IdleMediaScene";
|
||||
|
||||
const App = () => {
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
|
@ -25,7 +26,7 @@ const App = () => {
|
|||
return {
|
||||
main: <MainScene />,
|
||||
media: <MediaScene />,
|
||||
idle_media: <MediaScene />,
|
||||
idle_media: <IdleMediaScene />,
|
||||
gate: <GateScene />,
|
||||
boot: <BootScene />,
|
||||
sskn: <SSknScene />,
|
||||
|
|
|
@ -6,6 +6,31 @@ import GrayPlane from "./GrayPlanes/GrayPlane";
|
|||
const GrayPlanes = () => {
|
||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||
|
||||
const grayPlanesGeom = useMemo(() => {
|
||||
const singleGeom = new THREE.Geometry();
|
||||
|
||||
const grayPlanePoses = [
|
||||
[1.2, 0, -1.2],
|
||||
[1.2, 0, 1.2],
|
||||
[1.2, 0, -0.5],
|
||||
[-1.2, 0, -1.2],
|
||||
[-1.2, 0, 1.2],
|
||||
[-1.2, 0, 1],
|
||||
[0.5, 0, 1],
|
||||
];
|
||||
|
||||
for (let i = 0; i < grayPlanePoses.length; i++) {
|
||||
const mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry());
|
||||
mesh.position.set(
|
||||
grayPlanePoses[i][0],
|
||||
grayPlanePoses[i][1],
|
||||
grayPlanePoses[i][2]
|
||||
);
|
||||
}
|
||||
|
||||
return singleGeom;
|
||||
}, []);
|
||||
|
||||
const grayPlanePoses = useMemo(
|
||||
() => [
|
||||
[1.2, 0, -1.2],
|
||||
|
@ -28,6 +53,15 @@ const GrayPlanes = () => {
|
|||
{grayPlanePoses.map((pos, idx: number) => (
|
||||
<GrayPlane position={pos as [number, number, number]} key={idx} />
|
||||
))}
|
||||
{/*<mesh geometry={grayPlanesGeom}>*/}
|
||||
{/* <meshBasicMaterial*/}
|
||||
{/* attach="material"*/}
|
||||
{/* color={0xd3d3d3}*/}
|
||||
{/* opacity={0.2}*/}
|
||||
{/* transparent={true}*/}
|
||||
{/* side={THREE.DoubleSide}*/}
|
||||
{/* />*/}
|
||||
{/*</mesh>*/}
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -67,6 +67,12 @@ const HUD = () => {
|
|||
]
|
||||
);
|
||||
|
||||
const spriteTypeToSprite = useMemo(()=> {
|
||||
|
||||
|
||||
}, [])
|
||||
|
||||
//todo
|
||||
const spriteTypeToSprite = (spriteType: string, hudElement: string) => {
|
||||
switch (spriteType) {
|
||||
case "normal":
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import React, { useEffect, useMemo, useRef, memo } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import * as THREE from "three";
|
||||
|
@ -34,7 +34,7 @@ type NodeContructorProps = {
|
|||
level: string;
|
||||
};
|
||||
|
||||
const Node = (props: NodeContructorProps) => {
|
||||
const Node = memo((props: NodeContructorProps) => {
|
||||
// the game only has a couple of sprite that it displays in the hub
|
||||
// dynamically importnig them would be worse for performance,
|
||||
// so we import all of them here and then use this function to
|
||||
|
@ -139,9 +139,7 @@ const Node = (props: NodeContructorProps) => {
|
|||
activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? useNodeStore.getState().activeNodeState.rotZ
|
||||
: 0,
|
||||
activeNodeScale: useNodeStore.getState().activeNodeState.shrinking
|
||||
? 0
|
||||
: 1,
|
||||
activeNodeScale: useNodeStore.getState().activeNodeState.shrinking ? 0 : 1,
|
||||
activeNodeVisible: true,
|
||||
config: { duration: 800 },
|
||||
}));
|
||||
|
@ -182,6 +180,8 @@ const Node = (props: NodeContructorProps) => {
|
|||
}
|
||||
});
|
||||
|
||||
console.log("rendered");
|
||||
|
||||
return (
|
||||
<group
|
||||
position={[
|
||||
|
@ -239,6 +239,6 @@ const Node = (props: NodeContructorProps) => {
|
|||
)}
|
||||
</group>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default Node;
|
||||
|
|
|
@ -69,6 +69,10 @@ const MediaPlayer = () => {
|
|||
setPercentageElapsed(percentageElapsed);
|
||||
if (percentageElapsed === 100) {
|
||||
videoRef.current.currentTime = 0;
|
||||
if (currentScene === "idle_media") {
|
||||
videoRef.current.pause();
|
||||
setScene("main");
|
||||
} else {
|
||||
if (currentScene === "end") {
|
||||
incrementEndMediaPlayedCount();
|
||||
} else {
|
||||
|
@ -85,6 +89,7 @@ const MediaPlayer = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [
|
||||
activeLevel,
|
||||
activeNodeId,
|
||||
|
@ -165,6 +170,7 @@ const MediaPlayer = () => {
|
|||
setMediaSource(media.default);
|
||||
if (videoRef.current) {
|
||||
videoRef.current.load();
|
||||
videoRef.current.play();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
@ -173,6 +179,7 @@ const MediaPlayer = () => {
|
|||
setMediaSource(media.default);
|
||||
if (videoRef.current) {
|
||||
videoRef.current.load();
|
||||
videoRef.current.play();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
@ -5,14 +5,15 @@ 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, { useMemo } from "react";
|
||||
import React, { useMemo, memo } from "react";
|
||||
|
||||
const BigLetter = (props: {
|
||||
const BigLetter = memo(
|
||||
(props: {
|
||||
color: string;
|
||||
letter: string;
|
||||
letterIdx: number;
|
||||
xOffsetCoeff: number;
|
||||
}) => {
|
||||
}) => {
|
||||
const colorToTexture = (color: string) => {
|
||||
const colorTexture = {
|
||||
orange: orangeFont,
|
||||
|
@ -110,6 +111,7 @@ const BigLetter = (props: {
|
|||
/>
|
||||
</a.mesh>
|
||||
);
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export default BigLetter;
|
||||
|
|
|
@ -3,12 +3,9 @@ import * as THREE from "three";
|
|||
import greenFont from "../../static/sprite/white_and_green_texture.png";
|
||||
import medium_font_json from "../../resources/font_data/medium_font.json";
|
||||
import { a } from "@react-spring/three";
|
||||
import React, { useMemo } from "react";
|
||||
import React, { useMemo, memo } from "react";
|
||||
|
||||
const MediumLetter = (props: {
|
||||
letter: string;
|
||||
letterIdx: number;
|
||||
}) => {
|
||||
const MediumLetter = memo((props: { letter: string; letterIdx: number }) => {
|
||||
const colorTexture = useLoader(THREE.TextureLoader, greenFont);
|
||||
// i have yet to figure out a genrealizable way of
|
||||
// calculating the y offset, this shit will do for now
|
||||
|
@ -88,6 +85,6 @@ const MediumLetter = (props: {
|
|||
/>
|
||||
</a.mesh>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default MediumLetter;
|
||||
|
|
24
src/scenes/IdleMediaScene.tsx
Normal file
24
src/scenes/IdleMediaScene.tsx
Normal file
|
@ -0,0 +1,24 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { useIdleStore } from "../store";
|
||||
import Images from "../components/MediaScene/Images";
|
||||
|
||||
const IdleMediaScene = () => {
|
||||
const idleMedia = useIdleStore((state) => state.media);
|
||||
|
||||
useEffect(() => {
|
||||
document.getElementsByTagName("canvas")[0].className =
|
||||
"media-scene-background";
|
||||
|
||||
return () => {
|
||||
document.getElementsByTagName("canvas")[0].className = "";
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<group visible={idleMedia.includes("XA")}>
|
||||
<Images />
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
export default IdleMediaScene;
|
|
@ -76,22 +76,12 @@ const MediaScene = () => {
|
|||
</group>
|
||||
<MediaYellowTextAnimator />
|
||||
|
||||
<group
|
||||
visible={
|
||||
currentScene !== "idle_media" && activeNodeMedia.includes("XA")
|
||||
}
|
||||
>
|
||||
<group visible={activeNodeMedia.includes("XA")}>
|
||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
||||
<Lof />
|
||||
<AudioVisualizer />
|
||||
<Images />
|
||||
</group>
|
||||
|
||||
<group
|
||||
visible={currentScene === "idle_media" && idleMedia.includes("XA")}
|
||||
>
|
||||
<Images />
|
||||
</group>
|
||||
</group>
|
||||
<MediaSceneEventManager />
|
||||
</perspectiveCamera>
|
||||
|
|
Loading…
Reference in a new issue