From e4b2669392eb6524365f07534f4fe021b9da8ca1 Mon Sep 17 00:00:00 2001 From: ad044 Date: Sun, 13 Sep 2020 15:35:30 +0400 Subject: [PATCH] added gray planes in the back, intro looks much better now --- src/components/GrayPlanes/GrayPlanes.tsx | 70 ++++++++++++++++++++ src/components/GrayPlanes/GrayPlanesAtom.tsx | 11 +++ src/components/HUD/CurrentHUDAtom.tsx | 8 --- src/components/HUD/HUDActiveAtom.tsx | 11 --- src/components/HUD/HUDElement.tsx | 12 ++-- src/components/HUD/HUDElementAtom.tsx | 19 ++++++ src/components/InputHandler.tsx | 15 ++++- src/components/MainScene/MainScene.tsx | 4 +- src/components/MainScene/MainSceneIntro.tsx | 24 ++++++- src/components/OrthoCamera/OrthoCamera.tsx | 2 +- src/components/Starfield/Starfield.tsx | 29 ++++---- src/components/Starfield/StarfieldAtom.tsx | 10 +++ 12 files changed, 169 insertions(+), 46 deletions(-) create mode 100644 src/components/GrayPlanes/GrayPlanes.tsx create mode 100644 src/components/GrayPlanes/GrayPlanesAtom.tsx delete mode 100644 src/components/HUD/CurrentHUDAtom.tsx delete mode 100644 src/components/HUD/HUDActiveAtom.tsx create mode 100644 src/components/HUD/HUDElementAtom.tsx diff --git a/src/components/GrayPlanes/GrayPlanes.tsx b/src/components/GrayPlanes/GrayPlanes.tsx new file mode 100644 index 0000000..3965275 --- /dev/null +++ b/src/components/GrayPlanes/GrayPlanes.tsx @@ -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(); + + 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[]>( + poses.map(() => createRef()) + ) + ); + + 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 ( + + {grayPlaneRefs.map((ref, idx: number) => { + return ( + + + + + ); + })} + + ); +}); + +export default GrayPlanes; diff --git a/src/components/GrayPlanes/GrayPlanesAtom.tsx b/src/components/GrayPlanes/GrayPlanesAtom.tsx new file mode 100644 index 0000000..409d464 --- /dev/null +++ b/src/components/GrayPlanes/GrayPlanesAtom.tsx @@ -0,0 +1,11 @@ +import { atom } from "recoil"; + +export const grayPlanesPosYAtom = atom({ + key: "grayPlanesPosYAtom", + default: -1, +}); + +export const grayPlanesVisibleAtom = atom({ + key: "grayPlanesVisibleAtom", + default: false, +}); diff --git a/src/components/HUD/CurrentHUDAtom.tsx b/src/components/HUD/CurrentHUDAtom.tsx deleted file mode 100644 index c5ff25a..0000000 --- a/src/components/HUD/CurrentHUDAtom.tsx +++ /dev/null @@ -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"], -}); diff --git a/src/components/HUD/HUDActiveAtom.tsx b/src/components/HUD/HUDActiveAtom.tsx deleted file mode 100644 index b8cb9de..0000000 --- a/src/components/HUD/HUDActiveAtom.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { atom } from "recoil"; - -export const hudActiveAtom = atom({ - key: "hudActiveAtom", - default: 1, -}); - -export const hudVisibilityAtom = atom({ - key: "hudVisibilityAtom", - default: false, -}); diff --git a/src/components/HUD/HUDElement.tsx b/src/components/HUD/HUDElement.tsx index 251e8f5..c409ced 100644 --- a/src/components/HUD/HUDElement.tsx +++ b/src/components/HUD/HUDElement.tsx @@ -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; diff --git a/src/components/HUD/HUDElementAtom.tsx b/src/components/HUD/HUDElementAtom.tsx new file mode 100644 index 0000000..f792dc6 --- /dev/null +++ b/src/components/HUD/HUDElementAtom.tsx @@ -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"], +}); diff --git a/src/components/InputHandler.tsx b/src/components/InputHandler.tsx index 4b5eb4a..608f963 100644 --- a/src/components/InputHandler.tsx +++ b/src/components/InputHandler.tsx @@ -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( diff --git a/src/components/MainScene/MainScene.tsx b/src/components/MainScene/MainScene.tsx index 772bc1f..8673693 100644 --- a/src/components/MainScene/MainScene.tsx +++ b/src/components/MainScene/MainScene.tsx @@ -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 = () => { + diff --git a/src/components/MainScene/MainSceneIntro.tsx b/src/components/MainScene/MainSceneIntro.tsx index d533ff6..3815cd7 100644 --- a/src/components/MainScene/MainSceneIntro.tsx +++ b/src/components/MainScene/MainSceneIntro.tsx @@ -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); diff --git a/src/components/OrthoCamera/OrthoCamera.tsx b/src/components/OrthoCamera/OrthoCamera.tsx index 0ef50e4..8384429 100644 --- a/src/components/OrthoCamera/OrthoCamera.tsx +++ b/src/components/OrthoCamera/OrthoCamera.tsx @@ -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(); diff --git a/src/components/Starfield/Starfield.tsx b/src/components/Starfield/Starfield.tsx index cf9fade..19c0071 100644 --- a/src/components/Starfield/Starfield.tsx +++ b/src/components/Starfield/Starfield.tsx @@ -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(); - 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 ( <> diff --git a/src/components/Starfield/StarfieldAtom.tsx b/src/components/Starfield/StarfieldAtom.tsx index 771e16c..c9b590c 100644 --- a/src/components/Starfield/StarfieldAtom.tsx +++ b/src/components/Starfield/StarfieldAtom.tsx @@ -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, +});