diff --git a/src/components/GrayPlanes/GrayPlanes.tsx b/src/components/GrayPlanes/GrayPlanes.tsx index 3965275..262b80a 100644 --- a/src/components/GrayPlanes/GrayPlanes.tsx +++ b/src/components/GrayPlanes/GrayPlanes.tsx @@ -1,9 +1,17 @@ -import React, { createRef, memo, RefObject, useRef } from "react"; +import React, { + createRef, + memo, + MutableRefObject, + Ref, + 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"; +import { Object3D } from "three"; const GrayPlanes = memo(() => { const grayPlaneGroupRef = useRef(); @@ -51,6 +59,7 @@ const GrayPlanes = memo(() => { scale={[0.04, 10, 0.04]} position={grayPlanePoses[idx] as [number, number, number]} ref={ref} + key={idx} > { // wait for the anim to finish, set lain to standing state, release the move lock setTimeout(() => { - setLainMoving(false); setLainMoveState(); + setTimeout(() => { + setLainMoving(false); + }, 300); }, (lain_animations as LainAnimations)[key]["duration"]); }, [moveCamera, rotateCamera, setLainMoveState, setLainMoving] diff --git a/src/components/MainScene/MainSceneIntro.tsx b/src/components/MainScene/MainSceneIntro.tsx index 3815cd7..43e6008 100644 --- a/src/components/MainScene/MainSceneIntro.tsx +++ b/src/components/MainScene/MainSceneIntro.tsx @@ -77,6 +77,9 @@ const MainSceneIntro = memo(() => { }, 300); }, 3860); }, [ + setGrayPlanesVisible, + setMainStarfieldBoostVal, + setMainStarfieldVisible, setHudVisible, setOrbVisible, setIntroStarfieldVisible, diff --git a/src/components/Orb/Orb.tsx b/src/components/Orb/Orb.tsx index 2d3e855..c6c6707 100644 --- a/src/components/Orb/Orb.tsx +++ b/src/components/Orb/Orb.tsx @@ -6,6 +6,7 @@ import orbSprite from "../../static/sprites/orb.png"; // initialize outside the component otherwise it gets overwritten when it rerenders let orbIdx = 0; let orbDirectionChangeCount = 0; +let renderOrder = -1; type OrbProps = { orbVisibility: boolean; @@ -41,6 +42,7 @@ const Orb = memo((props: OrbProps) => { switch (currentCurve) { case "first": setOrbDirection("right"); + renderOrder = 0; break; case "second": setOrbDirection("left"); @@ -56,6 +58,7 @@ const Orb = memo((props: OrbProps) => { break; case "second": setOrbDirection("right"); + renderOrder = -1; break; } orbDirectionChangeCount++; @@ -108,8 +111,13 @@ const Orb = memo((props: OrbProps) => { return ( - - + + ); diff --git a/src/components/Starfield/Starfield.tsx b/src/components/Starfield/Starfield.tsx index 19c0071..0b2b9fb 100644 --- a/src/components/Starfield/Starfield.tsx +++ b/src/components/Starfield/Starfield.tsx @@ -206,7 +206,7 @@ const Starfield = memo(() => { posRef.current!.position.z = el[1][idx][2] - 0.5; } else { posRef.current!.position.x += - 0.03 + starSpeeds[idx] + starfieldState.starfieldBoostVal.get(); + 0.03 + starSpeeds[idx] +starfieldState.starfieldBoostVal.get(); posRef.current!.position.z += 0.015 + starfieldState.starfieldBoostVal.get() * 0.5; }