From 28a270d442ea27a78743526b2e4eccec592619d2 Mon Sep 17 00:00:00 2001 From: ad044 Date: Wed, 24 Feb 2021 14:05:39 +0400 Subject: [PATCH] fixed main scene bg and starfield --- src/components/MainScene/HUD.tsx | 10 +++--- .../MainScene/Site/MainSceneBackground.tsx | 21 ++++++++++++ src/components/MainScene/Site/Site.tsx | 2 +- .../MainScene/Starfield/Starfield.tsx | 2 +- src/scenes/ChangeDiscScene.tsx | 6 +--- src/scenes/MainScene.tsx | 32 ++++++++++++++++--- src/scenes/MediaScene.tsx | 9 ------ 7 files changed, 57 insertions(+), 25 deletions(-) create mode 100644 src/components/MainScene/Site/MainSceneBackground.tsx diff --git a/src/components/MainScene/HUD.tsx b/src/components/MainScene/HUD.tsx index 241317f..8766654 100644 --- a/src/components/MainScene/HUD.tsx +++ b/src/components/MainScene/HUD.tsx @@ -1,15 +1,15 @@ -import React, {memo, useEffect, useRef} from "react"; -import {useFrame, useLoader} from "react-three-fiber"; +import React, { memo, useEffect, useRef } from "react"; +import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; import bigHud from "../../static/sprite/big_hud.png"; import longHud from "../../static/sprite/long_hud.png"; import boringHud from "../../static/sprite/long_hud_boring.png"; -import {useStore} from "../../store"; +import { useStore } from "../../store"; import lerp from "../../utils/lerp"; import GreenTextRenderer from "../TextRenderer/GreenTextRenderer"; import usePrevious from "../../hooks/usePrevious"; -import {getNodeHud} from "../../helpers/node-helpers"; -import {HUDData} from "../../types/types"; +import { getNodeHud } from "../../helpers/node-helpers"; +import { HUDData } from "../../types/types"; const HUD = memo(() => { const activeRef = useRef(true); diff --git a/src/components/MainScene/Site/MainSceneBackground.tsx b/src/components/MainScene/Site/MainSceneBackground.tsx new file mode 100644 index 0000000..e40b4ac --- /dev/null +++ b/src/components/MainScene/Site/MainSceneBackground.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import mainSceneBg from "../../../static/sprite/main_scene_background.png"; +import { useLoader } from "react-three-fiber"; +import * as THREE from "three"; + +const MainSceneBackground = () => { + const mainSceneBgTex = useLoader(THREE.TextureLoader, mainSceneBg); + + return ( + + + + + ); +}; + +export default MainSceneBackground; diff --git a/src/components/MainScene/Site/Site.tsx b/src/components/MainScene/Site/Site.tsx index 4c3b6fc..1603e0a 100644 --- a/src/components/MainScene/Site/Site.tsx +++ b/src/components/MainScene/Site/Site.tsx @@ -67,7 +67,7 @@ const Site = (props: SiteProps) => { ); return ( - + : null}> diff --git a/src/components/MainScene/Starfield/Starfield.tsx b/src/components/MainScene/Starfield/Starfield.tsx index 8b5d140..f73347f 100644 --- a/src/components/MainScene/Starfield/Starfield.tsx +++ b/src/components/MainScene/Starfield/Starfield.tsx @@ -1,4 +1,4 @@ -import React, { memo, useEffect, useMemo, useRef, useState } from "react"; +import React, { memo, useMemo } from "react"; import Star from "./Star"; import IntroStar from "./IntroStar"; diff --git a/src/scenes/ChangeDiscScene.tsx b/src/scenes/ChangeDiscScene.tsx index 2f3370f..fe7ef55 100644 --- a/src/scenes/ChangeDiscScene.tsx +++ b/src/scenes/ChangeDiscScene.tsx @@ -7,6 +7,7 @@ const ChangeDiscScene = () => { useEffect(() => { if (activeSite === "a") { + // todo actually rip the assets from the original document.getElementsByTagName("canvas")[0].className = "change-disc-scene-a-background"; } else if (activeSite === "b") { @@ -15,11 +16,6 @@ const ChangeDiscScene = () => { } setTimeout(() => setScene("main"), 3500); - - return () => { - document.getElementsByTagName("canvas")[0].className = - "main-scene-background"; - }; }, [activeSite, setScene]); return <>; diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 35104ea..922a9f6 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -17,6 +17,8 @@ import Popups from "../components/MainScene/Popups/Popups"; import * as audio from "../static/audio/sfx"; import Loading from "../components/Loading"; import usePrevious from "../hooks/usePrevious"; +import MainSceneBackground from "../components/MainScene/Site/MainSceneBackground"; +import { useSpring, a } from "@react-spring/three"; const MainScene = () => { const intro = useStore((state) => state.intro); @@ -29,14 +31,22 @@ const MainScene = () => { const setInputCooldown = useStore((state) => state.setInputCooldown); const wordNotFound = useStore((state) => state.wordNotFound); + const [bgState, setBgState] = useSpring(() => ({ + posY: 0, + duration: 1200, + })); + useEffect(() => { if (subscene === "pause") { + setTimeout(() => setBgState({ posY: 2 }), 3600); setTimeout(() => setPaused(true), 3400); } else if (prevData?.subscene === "pause" && subscene === "site") { + setBgState({ posY: 0 }); setPaused(false); } - }, [prevData?.subscene, subscene]); + }, [prevData?.subscene, setBgState, subscene]); + // move up instead of rotate todo useEffect(() => { if (wordSelected) { setTimeout(() => setWordSelected(false), 3100); @@ -50,6 +60,11 @@ const MainScene = () => { setStarfieldIntro(false); setLainIntroAnim(false); setIntroFinished(false); + + starfieldIntroRef.current = false; + lainIntroRef.current = false; + introFinishedRef.current = false; + setInputCooldown(-1); } else { setInputCooldown(0); @@ -57,23 +72,28 @@ const MainScene = () => { }, [intro, setInputCooldown]); const [starfieldIntro, setStarfieldIntro] = useState(false); + const starfieldIntroRef = useRef(false); const [lainIntroAnim, setLainIntroAnim] = useState(false); + const lainIntroRef = useRef(false); const [introFinished, setIntroFinished] = useState(false); + const introFinishedRef = useRef(false); useFrame(() => { if (!introFinished && intro && introWrapperRef.current) { if (introWrapperRef.current.position.z === -10) playAudio(audio.sound32); if ( Math.round(introWrapperRef.current.position.z) === -3 && - !starfieldIntro + !starfieldIntroRef.current ) { setStarfieldIntro(true); + starfieldIntroRef.current = true; } if ( Math.round(introWrapperRef.current.position.z) === -1 && - !lainIntroAnim + !lainIntroRef.current ) { setLainIntroAnim(true); + lainIntroRef.current = true; } if (introWrapperRef.current.position.z < 0) { @@ -84,13 +104,14 @@ const MainScene = () => { } if ( - !introFinished && + !introFinishedRef.current && !( introWrapperRef.current.rotation.x > 0 && introWrapperRef.current.position.z < 0 ) ) { setIntroFinished(true); + introFinishedRef.current = true; setInputCooldown(0); } } @@ -102,6 +123,9 @@ const MainScene = () => { + + + diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx index 2a46a2a..d532793 100644 --- a/src/scenes/MediaScene.tsx +++ b/src/scenes/MediaScene.tsx @@ -23,15 +23,6 @@ const MediaScene = () => { (state) => state.incrementFinalVideoViewCount ); - useEffect(() => { - document.getElementsByTagName("canvas")[0].className = - "media-scene-background"; - - return () => { - document.getElementsByTagName("canvas")[0].className = ""; - }; - }, []); - useEffect(() => { if (percentageElapsed === 100 && activeNode.triggers_final_video) { setScene("end");