mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added gray planes in the back, intro looks much better now
This commit is contained in:
parent
ba56e5451f
commit
e4b2669392
12 changed files with 169 additions and 46 deletions
70
src/components/GrayPlanes/GrayPlanes.tsx
Normal file
70
src/components/GrayPlanes/GrayPlanes.tsx
Normal file
|
@ -0,0 +1,70 @@
|
|||
import React, { createRef, memo, RefObject, useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import { useSpring, a } from "@react-spring/three";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import { grayPlanesPosYAtom, grayPlanesVisibleAtom } from "./GrayPlanesAtom";
|
||||
|
||||
const GrayPlanes = memo(() => {
|
||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||
|
||||
const grayPlanePosY = useRecoilValue(grayPlanesPosYAtom);
|
||||
const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom);
|
||||
|
||||
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],
|
||||
];
|
||||
|
||||
const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
|
||||
useRef<RefObject<THREE.Object3D>[]>(
|
||||
poses.map(() => createRef<THREE.Object3D>())
|
||||
)
|
||||
);
|
||||
|
||||
useFrame(() => {
|
||||
grayPlaneGroupRef.current!.rotation.y -= 0.01;
|
||||
grayPlaneRefs.forEach((ref: any) => (ref.current!.rotation.y += 0.03));
|
||||
});
|
||||
|
||||
const grayPlaneState = useSpring({
|
||||
grayPlanePosY: grayPlanePosY,
|
||||
config: { duration: 1200 },
|
||||
});
|
||||
|
||||
return (
|
||||
<a.group
|
||||
position={[0.1, 0, -2]}
|
||||
position-y={grayPlaneState.grayPlanePosY}
|
||||
rotation={[0, 0, 0]}
|
||||
ref={grayPlaneGroupRef}
|
||||
visible={grayPlanesVisible}
|
||||
>
|
||||
{grayPlaneRefs.map((ref, idx: number) => {
|
||||
return (
|
||||
<mesh
|
||||
scale={[0.04, 10, 0.04]}
|
||||
position={grayPlanePoses[idx] as [number, number, number]}
|
||||
ref={ref}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
color={0xd3d3d3}
|
||||
opacity={0.2}
|
||||
transparent={true}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
})}
|
||||
</a.group>
|
||||
);
|
||||
});
|
||||
|
||||
export default GrayPlanes;
|
11
src/components/GrayPlanes/GrayPlanesAtom.tsx
Normal file
11
src/components/GrayPlanes/GrayPlanesAtom.tsx
Normal file
|
@ -0,0 +1,11 @@
|
|||
import { atom } from "recoil";
|
||||
|
||||
export const grayPlanesPosYAtom = atom({
|
||||
key: "grayPlanesPosYAtom",
|
||||
default: -1,
|
||||
});
|
||||
|
||||
export const grayPlanesVisibleAtom = atom({
|
||||
key: "grayPlanesVisibleAtom",
|
||||
default: false,
|
||||
});
|
|
@ -1,8 +0,0 @@
|
|||
import {atom} from "recoil";
|
||||
import level_sprite_huds from "../../resources/level_sprite_huds.json";
|
||||
import {SpriteHuds} from "./HUDElement";
|
||||
|
||||
export const currentHUDAtom = atom({
|
||||
key: "currentHUDAtom",
|
||||
default: (level_sprite_huds as SpriteHuds)["22"],
|
||||
});
|
|
@ -1,11 +0,0 @@
|
|||
import { atom } from "recoil";
|
||||
|
||||
export const hudActiveAtom = atom({
|
||||
key: "hudActiveAtom",
|
||||
default: 1,
|
||||
});
|
||||
|
||||
export const hudVisibilityAtom = atom({
|
||||
key: "hudVisibilityAtom",
|
||||
default: false,
|
||||
});
|
|
@ -1,5 +1,5 @@
|
|||
import React, {memo} from "react";
|
||||
import {useLoader} from "react-three-fiber";
|
||||
import React, { memo } from "react";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import bigHud from "../../static/sprites/big_hud.png";
|
||||
import bigHudMirrored from "../../static/sprites/big_hud_mirrored.png";
|
||||
|
@ -7,10 +7,10 @@ import longHud from "../../static/sprites/long_hud.png";
|
|||
import longHudMirrored from "../../static/sprites/long_hud_mirrored.png";
|
||||
import boringHud from "../../static/sprites/long_hud_boring.png";
|
||||
import boringHudMirrored from "../../static/sprites/long_hud_boring_mirrored.png";
|
||||
import {a, useSpring} from "@react-spring/three";
|
||||
import {useRecoilValue} from "recoil";
|
||||
import {hudActiveAtom} from "./HUDActiveAtom";
|
||||
import {currentHUDAtom} from "./CurrentHUDAtom";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import { hudActiveAtom } from "./HUDElementAtom";
|
||||
import { currentHUDAtom } from "./HUDElementAtom";
|
||||
|
||||
export type HUDElementProps = {
|
||||
hudVisibility: boolean;
|
||||
|
|
19
src/components/HUD/HUDElementAtom.tsx
Normal file
19
src/components/HUD/HUDElementAtom.tsx
Normal file
|
@ -0,0 +1,19 @@
|
|||
import { atom } from "recoil";
|
||||
import level_sprite_huds from "../../resources/level_sprite_huds.json";
|
||||
import {SpriteHuds} from "./HUDElement";
|
||||
|
||||
|
||||
export const hudActiveAtom = atom({
|
||||
key: "hudActiveAtom",
|
||||
default: 1,
|
||||
});
|
||||
|
||||
export const hudVisibilityAtom = atom({
|
||||
key: "hudVisibilityAtom",
|
||||
default: false,
|
||||
});
|
||||
|
||||
export const currentHUDAtom = atom({
|
||||
key: "currentHUDAtom",
|
||||
default: (level_sprite_huds as SpriteHuds)["22"],
|
||||
});
|
|
@ -7,7 +7,7 @@ import {
|
|||
LainStanding,
|
||||
} from "./Lain/Lain";
|
||||
import { useRecoilState, useSetRecoilState } from "recoil";
|
||||
import { hudActiveAtom } from "./HUD/HUDActiveAtom";
|
||||
import { hudActiveAtom, currentHUDAtom } from "./HUD/HUDElementAtom";
|
||||
import { currentSpriteAtom } from "./LevelSprite/CurrentSpriteAtom";
|
||||
import lain_animations from "../resources/lain_animations.json";
|
||||
import level_sprite_huds from "../resources/level_sprite_huds.json";
|
||||
|
@ -19,9 +19,9 @@ import {
|
|||
} from "./Lain/LainAtom";
|
||||
import { camPosYAtom, camRotYAtom } from "./MainScene/CameraAtom";
|
||||
import { starfieldPosYAtom } from "./Starfield/StarfieldAtom";
|
||||
import { currentHUDAtom } from "./HUD/CurrentHUDAtom";
|
||||
import { SpriteHuds } from "./HUD/HUDElement";
|
||||
import { orthoCamPosYAtom } from "./OrthoCamera/OrthoCameraAtom";
|
||||
import { grayPlanesPosYAtom } from "./GrayPlanes/GrayPlanesAtom";
|
||||
|
||||
type KeyCodeAssociations = {
|
||||
[keyCode: number]: string;
|
||||
|
@ -62,6 +62,8 @@ const InputHandler = () => {
|
|||
|
||||
const setLainPosY = useSetRecoilState(lainPosYAtom);
|
||||
|
||||
const setGrayPlanePosY = useSetRecoilState(grayPlanesPosYAtom);
|
||||
|
||||
const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom);
|
||||
|
||||
const moveCamera = useCallback(
|
||||
|
@ -70,8 +72,15 @@ const InputHandler = () => {
|
|||
setLainPosY((prev: number) => prev - val);
|
||||
setStarfieldPosY((prev: number) => prev - val);
|
||||
setOrthoCamPosY((prev: number) => prev - val);
|
||||
setGrayPlanePosY((prev: number) => prev - val);
|
||||
},
|
||||
[setCamPosY, setLainPosY, setStarfieldPosY, setOrthoCamPosY]
|
||||
[
|
||||
setCamPosY,
|
||||
setLainPosY,
|
||||
setStarfieldPosY,
|
||||
setOrthoCamPosY,
|
||||
setGrayPlanePosY,
|
||||
]
|
||||
);
|
||||
|
||||
const rotateCamera = useCallback(
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { a, useSpring } from "@react-spring/three";
|
||||
import { OrbitControls } from "drei";
|
||||
import React, { Suspense, useEffect, useRef, useState } from "react";
|
||||
import React, { Suspense, useEffect } from "react";
|
||||
import Hub from "../Hub";
|
||||
import Lain, { LainIntro } from "../Lain/Lain";
|
||||
import Lights from "../Lights";
|
||||
|
@ -17,6 +17,7 @@ import {
|
|||
mainGroupPosZAtom,
|
||||
mainGroupRotXAtom,
|
||||
} from "./MainGroupAtom";
|
||||
import GrayPlanes from "../GrayPlanes/GrayPlanes";
|
||||
|
||||
const MainScene = () => {
|
||||
const setLainMoving = useSetRecoilState(lainMovingAtom);
|
||||
|
@ -69,6 +70,7 @@ const MainScene = () => {
|
|||
<Hub />
|
||||
<OrthoCamera />
|
||||
<Starfield />
|
||||
<GrayPlanes />
|
||||
<Lights />
|
||||
<OrbitControls />
|
||||
</a.group>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { memo, useEffect } from "react";
|
||||
import { useSetRecoilState } from "recoil";
|
||||
import { hudActiveAtom, hudVisibilityAtom } from "../HUD/HUDActiveAtom";
|
||||
import { hudActiveAtom, hudVisibilityAtom } from "../HUD/HUDElementAtom";
|
||||
import {
|
||||
mainGroupPosYAtom,
|
||||
mainGroupPosZAtom,
|
||||
|
@ -9,7 +9,12 @@ import {
|
|||
import { LainStanding } from "../Lain/Lain";
|
||||
import { lainMoveStateAtom, lainMovingAtom } from "../Lain/LainAtom";
|
||||
import { orbVisibilityAtom } from "../Orb/OrbAtom";
|
||||
import { introStarfieldVisibilityAtom } from "../Starfield/StarfieldAtom";
|
||||
import {
|
||||
introStarfieldVisibilityAtom,
|
||||
mainStarfieldBoostValAtom,
|
||||
mainStarfieldVisibilityAtom,
|
||||
} from "../Starfield/StarfieldAtom";
|
||||
import { grayPlanesVisibleAtom } from "../GrayPlanes/GrayPlanesAtom";
|
||||
|
||||
// ghost component to manipulate the intro animation for the main scene.
|
||||
|
||||
|
@ -28,11 +33,17 @@ const MainSceneIntro = memo(() => {
|
|||
const setIntroStarfieldVisible = useSetRecoilState(
|
||||
introStarfieldVisibilityAtom
|
||||
);
|
||||
const setMainStarfieldVisible = useSetRecoilState(
|
||||
mainStarfieldVisibilityAtom
|
||||
);
|
||||
const setMainStarfieldBoostVal = useSetRecoilState(mainStarfieldBoostValAtom);
|
||||
|
||||
const setMainGroupPosY = useSetRecoilState(mainGroupPosYAtom);
|
||||
const setMainGroupPosZ = useSetRecoilState(mainGroupPosZAtom);
|
||||
const setMainGroupRotX = useSetRecoilState(mainGroupRotXAtom);
|
||||
|
||||
const setGrayPlanesVisible = useSetRecoilState(grayPlanesVisibleAtom);
|
||||
|
||||
useEffect(() => {
|
||||
setMainGroupPosY(0);
|
||||
setMainGroupPosZ(0);
|
||||
|
@ -40,6 +51,15 @@ const MainSceneIntro = memo(() => {
|
|||
setMainGroupRotX(0);
|
||||
}, 2400);
|
||||
|
||||
setTimeout(() => {
|
||||
setGrayPlanesVisible(true);
|
||||
}, 2500);
|
||||
|
||||
setTimeout(() => {
|
||||
setMainStarfieldVisible(true);
|
||||
setMainStarfieldBoostVal(0);
|
||||
}, 2800);
|
||||
|
||||
setHudActive((prev: number) => Number(!prev));
|
||||
setTimeout(() => {
|
||||
setLainMoving(false);
|
||||
|
|
|
@ -7,7 +7,7 @@ import { useRecoilValue } from "recoil";
|
|||
import { orthoCamPosYAtom } from "./OrthoCameraAtom";
|
||||
import { useSpring, a } from "@react-spring/three";
|
||||
import { orbVisibilityAtom } from "../Orb/OrbAtom";
|
||||
import { hudVisibilityAtom } from "../HUD/HUDActiveAtom";
|
||||
import { hudVisibilityAtom } from "../HUD/HUDElementAtom";
|
||||
|
||||
const OrthoCamera = memo(() => {
|
||||
const { gl, scene, camera } = useThree();
|
||||
|
|
|
@ -12,6 +12,8 @@ import { useFrame } from "react-three-fiber";
|
|||
import * as THREE from "three";
|
||||
import {
|
||||
introStarfieldVisibilityAtom,
|
||||
mainStarfieldBoostValAtom,
|
||||
mainStarfieldVisibilityAtom,
|
||||
starfieldPosYAtom,
|
||||
} from "./StarfieldAtom";
|
||||
import { useRecoilValue } from "recoil";
|
||||
|
@ -42,14 +44,16 @@ type IntroStarfieldObjectData = {
|
|||
const Starfield = memo(() => {
|
||||
const introStarfieldGroupRef = useRef<THREE.Object3D>();
|
||||
|
||||
const [mainStarfieldVisible, setMainStarfieldVisible] = useState(false);
|
||||
|
||||
const starfieldPosY = useRecoilValue(starfieldPosYAtom);
|
||||
|
||||
const introStarfieldVisible = useRecoilValue(introStarfieldVisibilityAtom);
|
||||
const mainStarfieldVisible = useRecoilValue(mainStarfieldVisibilityAtom);
|
||||
|
||||
const mainStarfieldBoostVal = useRecoilValue(mainStarfieldBoostValAtom);
|
||||
|
||||
const starfieldState = useSpring({
|
||||
starfieldPosY: starfieldPosY,
|
||||
starfieldBoostVal: mainStarfieldBoostVal,
|
||||
config: { duration: 1200 },
|
||||
});
|
||||
|
||||
|
@ -186,8 +190,10 @@ const Starfield = memo(() => {
|
|||
posRef.current!.position.x = el[1][idx][0] + 6;
|
||||
posRef.current!.position.z = el[1][idx][2] - 2.5;
|
||||
}
|
||||
posRef.current!.position.x -= 0.03 + starSpeeds[idx];
|
||||
posRef.current!.position.z += 0.035;
|
||||
posRef.current!.position.x -=
|
||||
0.03 + starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
|
||||
posRef.current!.position.z +=
|
||||
0.035 + starfieldState.starfieldBoostVal.get() * 0.5;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
@ -199,8 +205,10 @@ const Starfield = memo(() => {
|
|||
posRef.current!.position.x = el[1][idx][0] - 9;
|
||||
posRef.current!.position.z = el[1][idx][2] - 0.5;
|
||||
} else {
|
||||
posRef.current!.position.x += 0.03 + starSpeeds[idx];
|
||||
posRef.current!.position.z += 0.015;
|
||||
posRef.current!.position.x +=
|
||||
0.03 + starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
|
||||
posRef.current!.position.z +=
|
||||
0.015 + starfieldState.starfieldBoostVal.get() * 0.5;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
@ -271,18 +279,11 @@ const Starfield = memo(() => {
|
|||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setMainStarfieldVisible(true);
|
||||
console.log("123");
|
||||
}, 1800);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<a.group
|
||||
ref={introStarfieldGroupRef}
|
||||
position={[-2, -20, -3.2]}
|
||||
position={[-2, -35, -3.2]}
|
||||
rotation={[0, 0, 0]}
|
||||
visible={introStarfieldVisible}
|
||||
>
|
||||
|
|
|
@ -9,3 +9,13 @@ export const introStarfieldVisibilityAtom = atom({
|
|||
key: "introStarfieldVisibilityAtom",
|
||||
default: true,
|
||||
});
|
||||
|
||||
export const mainStarfieldVisibilityAtom = atom({
|
||||
key: "mainStarfieldVisibilityAtom",
|
||||
default: false,
|
||||
});
|
||||
|
||||
export const mainStarfieldBoostValAtom = atom({
|
||||
key: "mainStarfieldBoostVal",
|
||||
default: 0.2,
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue