mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
cleaned up global state after inputhandler refactor
This commit is contained in:
parent
a94f701d3e
commit
c71a8eae5b
15 changed files with 178 additions and 307 deletions
|
@ -1,6 +1,6 @@
|
|||
import React, { memo, useMemo, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { a } from "@react-spring/three";
|
||||
import * as THREE from "three";
|
||||
import Cou from "../../static/sprites/Cou.png";
|
||||
import CouActive from "../../static/sprites/Cou_active.png";
|
||||
|
@ -17,7 +17,6 @@ import LdaActive from "../../static/sprites/Lda_active.png";
|
|||
import MULTI from "../../static/sprites/MULTI.png";
|
||||
import MULTIActive from "../../static/sprites/MULTI_active.png";
|
||||
import level_y_values from "../../resources/level_y_values.json";
|
||||
import { useRecoilValue } from "recoil";
|
||||
|
||||
type BlueOrbContructorProps = {
|
||||
sprite: string;
|
||||
|
@ -117,7 +116,6 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<group position={[0, (level_y_values as LevelYValues)[props.level], 0]}>
|
||||
<a.mesh
|
||||
|
|
|
@ -1,19 +1,12 @@
|
|||
import React, { createRef, memo, RefObject, useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import {
|
||||
grayPlanesPosYAtom,
|
||||
grayPlanesRotYAtom,
|
||||
grayPlanesVisibleAtom,
|
||||
} from "./GrayPlanesAtom";
|
||||
import { grayPlanesVisibleAtom } from "./GrayPlanesAtom";
|
||||
|
||||
const GrayPlanes = memo(() => {
|
||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||
|
||||
const grayPlanePosY = useRecoilValue(grayPlanesPosYAtom);
|
||||
const grayPlaneRotY = useRecoilValue(grayPlanesRotYAtom);
|
||||
const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom);
|
||||
|
||||
const grayPlanePoses = [
|
||||
|
@ -37,42 +30,33 @@ const GrayPlanes = memo(() => {
|
|||
grayPlaneRefs.forEach((ref: any) => (ref.current!.rotation.y += 0.03));
|
||||
});
|
||||
|
||||
const grayPlaneState = useSpring({
|
||||
grayPlanePosY: grayPlanePosY,
|
||||
grayPlaneRotY: grayPlaneRotY,
|
||||
config: { duration: 1200 },
|
||||
});
|
||||
|
||||
return (
|
||||
// separate wrapper group to make it rotate around [0,0,0]
|
||||
<a.group rotation-y={grayPlaneState.grayPlaneRotY}>
|
||||
<a.group
|
||||
position={[0.1, 0, -2]}
|
||||
position-y={grayPlaneState.grayPlanePosY}
|
||||
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}
|
||||
key={idx}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
color={0xd3d3d3}
|
||||
opacity={0.2}
|
||||
transparent={true}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
})}
|
||||
</a.group>
|
||||
</a.group>
|
||||
<group
|
||||
position={[0.1, 0, -2]}
|
||||
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}
|
||||
key={idx}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
color={0xd3d3d3}
|
||||
opacity={0.2}
|
||||
transparent={true}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
})}
|
||||
</group>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
@ -1,15 +1,5 @@
|
|||
import { atom } from "recoil";
|
||||
|
||||
export const grayPlanesPosYAtom = atom({
|
||||
key: "grayPlanesPosYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const grayPlanesRotYAtom = atom({
|
||||
key: "grayPlanesRotYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const grayPlanesVisibleAtom = atom({
|
||||
key: "grayPlanesVisibleAtom",
|
||||
default: false,
|
||||
|
|
|
@ -24,10 +24,10 @@ import { BlueOrbHuds } from "./HUD/HUDElement";
|
|||
import {
|
||||
middleRingAnimDurationAtom,
|
||||
middleRingNoiseAtom,
|
||||
middleRingPosYAtom,
|
||||
middleRingRotatingAtom,
|
||||
middleRingRotXAtom,
|
||||
middleRingRotZAtom,
|
||||
middleRingPosYAtom,
|
||||
middleRingWobbleStrengthAtom,
|
||||
} from "./MiddleRing/MiddleRingAtom";
|
||||
import { bigLetterOffsetXCoeffAtom } from "./TextRenderer/TextRendererAtom";
|
||||
|
@ -168,7 +168,7 @@ const InputHandler = () => {
|
|||
[setMiddleRingRotZ]
|
||||
);
|
||||
|
||||
const moveMiddleRingUp = useCallback(() => {
|
||||
const moveMiddleRingDown = useCallback(() => {
|
||||
// make noise appear again
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(0.06);
|
||||
|
@ -207,7 +207,7 @@ const InputHandler = () => {
|
|||
}, 11600);
|
||||
}, [setMiddleRingNoise, setMiddleRingRotX, setMiddleRingRotating]);
|
||||
|
||||
const moveMiddleRingDown = useCallback(() => {
|
||||
const moveMiddleRingUp = useCallback(() => {
|
||||
// change noise to 0, make the ring bend downwards
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(0);
|
||||
|
@ -282,7 +282,7 @@ const InputHandler = () => {
|
|||
setMiddleRingAnimDuration(1500);
|
||||
// animate it after
|
||||
setMiddleRingPosY((prev: number) => prev - 1.5);
|
||||
}, 1100);
|
||||
}, 1300);
|
||||
|
||||
// reset anim duration back to default
|
||||
setTimeout(() => {
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import { a, useSpring } from "@react-spring/three";
|
||||
import React, { Suspense, useState } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
@ -10,129 +9,120 @@ import moveRightSpriteSheet from "../../static/sprites/move_right.png";
|
|||
import standingSpriteSheet from "../../static/sprites/standing.png";
|
||||
import introSpriteSheet from "../../static/sprites/intro.png";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import { lainMoveStateAtom, lainMovingAtom, lainPosYAtom } from "./LainAtom";
|
||||
import { lainMoveStateAtom, lainMovingAtom } from "./LainAtom";
|
||||
|
||||
type LainConstructorProps = {
|
||||
sprite: string;
|
||||
frameCount: number;
|
||||
framesVertical: number;
|
||||
framesHorizontal: number;
|
||||
sprite: string;
|
||||
frameCount: number;
|
||||
framesVertical: number;
|
||||
framesHorizontal: number;
|
||||
};
|
||||
|
||||
const LainConstructor = (props: LainConstructorProps) => {
|
||||
// any here temporarily
|
||||
const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite);
|
||||
// any here temporarily
|
||||
const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite);
|
||||
|
||||
const [animator] = useState(
|
||||
() =>
|
||||
new PlainSingularAnimator(
|
||||
lainSpriteTexture,
|
||||
props.framesHorizontal,
|
||||
props.framesVertical,
|
||||
props.frameCount,
|
||||
props.frameCount * 0.27
|
||||
)
|
||||
);
|
||||
const [animator] = useState(
|
||||
() =>
|
||||
new PlainSingularAnimator(
|
||||
lainSpriteTexture,
|
||||
props.framesHorizontal,
|
||||
props.framesVertical,
|
||||
props.frameCount,
|
||||
props.frameCount * 0.27
|
||||
)
|
||||
);
|
||||
|
||||
useFrame(() => {
|
||||
animator.animate();
|
||||
});
|
||||
useFrame(() => {
|
||||
animator.animate();
|
||||
});
|
||||
|
||||
return (
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={lainSpriteTexture}
|
||||
alphaTest={0.01}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={lainSpriteTexture}
|
||||
alphaTest={0.01}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainIntro = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={introSpriteSheet}
|
||||
frameCount={50}
|
||||
framesHorizontal={10}
|
||||
framesVertical={5}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={introSpriteSheet}
|
||||
frameCount={50}
|
||||
framesHorizontal={10}
|
||||
framesVertical={5}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainStanding = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={standingSpriteSheet}
|
||||
frameCount={3}
|
||||
framesHorizontal={3}
|
||||
framesVertical={1}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={standingSpriteSheet}
|
||||
frameCount={3}
|
||||
framesHorizontal={3}
|
||||
framesVertical={1}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainMoveDown = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveDownSpriteSheet}
|
||||
frameCount={36}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveDownSpriteSheet}
|
||||
frameCount={36}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainMoveLeft = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveLeftSpriteSheet}
|
||||
frameCount={47}
|
||||
framesHorizontal={8}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveLeftSpriteSheet}
|
||||
frameCount={47}
|
||||
framesHorizontal={8}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainMoveRight = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveRightSpriteSheet}
|
||||
frameCount={47}
|
||||
framesHorizontal={8}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveRightSpriteSheet}
|
||||
frameCount={47}
|
||||
framesHorizontal={8}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainMoveUp = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveUpSpriteSheet}
|
||||
frameCount={36}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveUpSpriteSheet}
|
||||
frameCount={36}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Lain = () => {
|
||||
const lainMoving = useRecoilValue(lainMovingAtom);
|
||||
const lainMoveState = useRecoilValue(lainMoveStateAtom);
|
||||
const lainPosY = useRecoilValue(lainPosYAtom);
|
||||
const lainMoving = useRecoilValue(lainMovingAtom);
|
||||
const lainMoveState = useRecoilValue(lainMoveStateAtom);
|
||||
|
||||
const lainPosYState = useSpring({
|
||||
lainPosY: lainPosY,
|
||||
config: { duration: 1200 },
|
||||
});
|
||||
|
||||
return (
|
||||
<Suspense fallback={<>loading...</>}>
|
||||
<a.sprite
|
||||
position-y={lainPosYState.lainPosY}
|
||||
scale={[4.5, 4.5, 4.5]}
|
||||
>
|
||||
{lainMoving ? lainMoveState : <LainStanding />}
|
||||
</a.sprite>
|
||||
</Suspense>
|
||||
);
|
||||
return (
|
||||
<Suspense fallback={<>loading...</>}>
|
||||
<sprite scale={[4.5, 4.5, 4.5]} position={[0, -0.15, 0]}>
|
||||
{lainMoving ? lainMoveState : <LainStanding />}
|
||||
</sprite>
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
export default Lain;
|
||||
|
|
|
@ -1,16 +1,6 @@
|
|||
import { atom } from "recoil";
|
||||
import React from "react";
|
||||
|
||||
export const lainPosYAtom = atom({
|
||||
key: "lainPosYAtom",
|
||||
default: -0.15,
|
||||
});
|
||||
|
||||
export const lainRotYAtom = atom({
|
||||
key: "lainRotYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const lainMovingAtom = atom({
|
||||
key: "lainMovingAtom",
|
||||
default: false,
|
||||
|
|
14
src/components/Lights.tsx
Normal file
14
src/components/Lights.tsx
Normal file
|
@ -0,0 +1,14 @@
|
|||
import React, { memo } from "react";
|
||||
|
||||
const Lights = memo(() => {
|
||||
return (
|
||||
<>
|
||||
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
||||
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
|
||||
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
||||
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export default Lights;
|
|
@ -1,30 +0,0 @@
|
|||
import React, { memo } from "react";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { lightPosYAtom, lightRotYAtom } from "./LightsAtom";
|
||||
|
||||
const Lights = memo(() => {
|
||||
const lightRotY = useRecoilValue(lightRotYAtom);
|
||||
const lightPosY = useRecoilValue(lightPosYAtom);
|
||||
|
||||
const lightState = useSpring({
|
||||
lightRotY: lightRotY,
|
||||
lightPosY: lightPosY,
|
||||
config: { duration: 1200 },
|
||||
});
|
||||
|
||||
return (
|
||||
<a.group
|
||||
position-y={lightState.lightPosY}
|
||||
rotation-y={lightState.lightRotY}
|
||||
>
|
||||
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
||||
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
|
||||
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
||||
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
||||
|
||||
</a.group>
|
||||
);
|
||||
});
|
||||
|
||||
export default Lights;
|
|
@ -1,11 +0,0 @@
|
|||
import { atom } from "recoil";
|
||||
|
||||
export const lightPosYAtom = atom({
|
||||
key: "lightPosYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const lightRotYAtom = atom({
|
||||
key: "lightRotYAtom",
|
||||
default: 0,
|
||||
});
|
|
@ -1,12 +0,0 @@
|
|||
import { atom } from "recoil";
|
||||
|
||||
export const camRotYAtom = atom({
|
||||
key: "camRotYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const camPosYAtom = atom({
|
||||
key: "camPosYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
|
@ -2,83 +2,69 @@ import { a, useSpring } from "@react-spring/three";
|
|||
import { OrbitControls } from "drei";
|
||||
import React, { Suspense, useEffect } from "react";
|
||||
import Site from "../Site/Site";
|
||||
import Lain, { LainIntro } from "../Lain/Lain";
|
||||
import Lights from "../Lights/Lights";
|
||||
import Lain from "../Lain/Lain";
|
||||
import Lights from "../Lights";
|
||||
import OrthoCamera from "../OrthoCamera/OrthoCamera";
|
||||
import Preloader from "../Preloader";
|
||||
import Starfield from "../Starfield/Starfield";
|
||||
import { useRecoilValue, useSetRecoilState } from "recoil";
|
||||
import { lainMoveStateAtom, lainMovingAtom } from "../Lain/LainAtom";
|
||||
import { camPosYAtom, camRotYAtom } from "./CameraAtom";
|
||||
import InputHandler from "../InputHandler";
|
||||
import MainSceneIntro from "./MainSceneIntro";
|
||||
import {
|
||||
mainGroupPosYAtom,
|
||||
mainGroupPosZAtom,
|
||||
mainGroupRotXAtom,
|
||||
mainGroupPosYAtom,
|
||||
mainGroupPosZAtom,
|
||||
mainGroupRotXAtom,
|
||||
} from "./MainGroupAtom";
|
||||
import GrayPlanes from "../GrayPlanes/GrayPlanes";
|
||||
import MiddleRing from "../MiddleRing/MiddleRing";
|
||||
import Starfield from "../Starfield/Starfield";
|
||||
|
||||
const MainScene = () => {
|
||||
const setLainMoving = useSetRecoilState(lainMovingAtom);
|
||||
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
||||
const mainGroupPosY = useRecoilValue(mainGroupPosYAtom);
|
||||
const mainGroupPosZ = useRecoilValue(mainGroupPosZAtom);
|
||||
const mainGroupRotX = useRecoilValue(mainGroupRotXAtom);
|
||||
const setLainMoving = useSetRecoilState(lainMovingAtom);
|
||||
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
||||
const mainGroupPosY = useRecoilValue(mainGroupPosYAtom);
|
||||
const mainGroupPosZ = useRecoilValue(mainGroupPosZAtom);
|
||||
const mainGroupRotX = useRecoilValue(mainGroupRotXAtom);
|
||||
|
||||
const camPosY = useRecoilValue(camPosYAtom);
|
||||
const camRotY = useRecoilValue(camRotYAtom);
|
||||
const mainGroupStatePos = useSpring({
|
||||
mainGroupPosY: mainGroupPosY,
|
||||
mainGroupPosZ: mainGroupPosZ,
|
||||
config: { duration: 3644 },
|
||||
});
|
||||
|
||||
const cameraState = useSpring({
|
||||
camPosY: camPosY,
|
||||
camRotY: camRotY,
|
||||
config: { duration: 1200 },
|
||||
});
|
||||
const mainGroupStateRot = useSpring({
|
||||
mainGroupRotX: mainGroupRotX,
|
||||
config: { duration: 1500 },
|
||||
});
|
||||
|
||||
const mainGroupStatePos = useSpring({
|
||||
mainGroupPosY: mainGroupPosY,
|
||||
mainGroupPosZ: mainGroupPosZ,
|
||||
config: { duration: 3644 },
|
||||
});
|
||||
// set lain intro spritesheet before the page loads fully
|
||||
useEffect(() => {
|
||||
// setLainMoving(true);
|
||||
// setLainMoveState(<LainIntro />);
|
||||
}, [setLainMoveState, setLainMoving]);
|
||||
|
||||
const mainGroupStateRot = useSpring({
|
||||
mainGroupRotX: mainGroupRotX,
|
||||
config: { duration: 1500 },
|
||||
});
|
||||
|
||||
// set lain intro spritesheet before the page loads fully
|
||||
useEffect(() => {
|
||||
// setLainMoving(true);
|
||||
// setLainMoveState(<LainIntro />);
|
||||
}, [setLainMoveState, setLainMoving]);
|
||||
|
||||
return (
|
||||
<a.perspectiveCamera
|
||||
position-z={3}
|
||||
position-y={cameraState.camPosY}
|
||||
rotation-y={cameraState.camRotY}
|
||||
return (
|
||||
<perspectiveCamera position-z={3}>
|
||||
<Suspense fallback={null}>
|
||||
<MainSceneIntro />
|
||||
<a.group
|
||||
rotation-x={mainGroupStateRot.mainGroupRotX}
|
||||
position-y={mainGroupStatePos.mainGroupPosY}
|
||||
position-z={mainGroupStatePos.mainGroupPosZ}
|
||||
>
|
||||
<Suspense fallback={null}>
|
||||
<MainSceneIntro />
|
||||
<a.group
|
||||
rotation-x={mainGroupStateRot.mainGroupRotX}
|
||||
position-y={mainGroupStatePos.mainGroupPosY}
|
||||
position-z={mainGroupStatePos.mainGroupPosZ}
|
||||
>
|
||||
<InputHandler />
|
||||
<Preloader />
|
||||
<Site />
|
||||
<OrthoCamera />
|
||||
{/*<Starfield />*/}
|
||||
<GrayPlanes />
|
||||
<Lights />
|
||||
<MiddleRing />
|
||||
<OrbitControls />
|
||||
</a.group>
|
||||
<Lain />
|
||||
</Suspense>
|
||||
</a.perspectiveCamera>
|
||||
);
|
||||
<InputHandler />
|
||||
<Preloader />
|
||||
<Site />
|
||||
<OrthoCamera />
|
||||
<Starfield />
|
||||
<GrayPlanes />
|
||||
<Lights />
|
||||
<MiddleRing />
|
||||
<OrbitControls />
|
||||
</a.group>
|
||||
<Lain />
|
||||
</Suspense>
|
||||
</perspectiveCamera>
|
||||
);
|
||||
};
|
||||
export default MainScene;
|
||||
|
|
|
@ -5,11 +5,9 @@ import * as THREE from "three";
|
|||
import { a, useSpring } from "@react-spring/three";
|
||||
import {
|
||||
middleRingAnimDurationAtom,
|
||||
middleRingNoiseAtom,
|
||||
middleRingPosYAtom,
|
||||
middleRingNoiseAtom, middleRingPosYAtom,
|
||||
middleRingRotatingAtom,
|
||||
middleRingRotXAtom,
|
||||
middleRingRotYAtom,
|
||||
middleRingRotZAtom,
|
||||
middleRingWobbleStrengthAtom,
|
||||
} from "./MiddleRingAtom";
|
||||
|
@ -24,7 +22,6 @@ const MiddleRing = () => {
|
|||
const middleRingPosY = useRecoilValue(middleRingPosYAtom);
|
||||
const middleRingRotX = useRecoilValue(middleRingRotXAtom);
|
||||
const middleRingRotZ = useRecoilValue(middleRingRotZAtom);
|
||||
const middleRingRotY = useRecoilValue(middleRingRotYAtom);
|
||||
|
||||
const middleRingAnimDuration = useRecoilValue(middleRingAnimDurationAtom);
|
||||
|
||||
|
@ -42,7 +39,6 @@ const MiddleRing = () => {
|
|||
const middleRingRotState = useSpring({
|
||||
middleRingRotX: middleRingRotX,
|
||||
middleRingRotZ: middleRingRotZ,
|
||||
middleRingRotY: middleRingRotY,
|
||||
config: { duration: 1000 },
|
||||
});
|
||||
|
||||
|
@ -218,7 +214,6 @@ const MiddleRing = () => {
|
|||
return (
|
||||
<a.group
|
||||
rotation-z={middleRingRotState.middleRingRotZ}
|
||||
rotation-y={middleRingRotState.middleRingRotY}
|
||||
>
|
||||
<a.mesh
|
||||
position={[0, 0, 0.3]}
|
||||
|
|
|
@ -30,11 +30,6 @@ export const middleRingRotZAtom = atom({
|
|||
default: 0,
|
||||
});
|
||||
|
||||
export const middleRingRotYAtom = atom({
|
||||
key: "middleRingRotYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const middleRingAnimDurationAtom = atom({
|
||||
key: "middleRingAnimDurationAtom",
|
||||
default: 500,
|
||||
|
|
|
@ -6,8 +6,6 @@ import {
|
|||
introStarfieldVisibilityAtom,
|
||||
mainStarfieldBoostValAtom,
|
||||
mainStarfieldVisibilityAtom,
|
||||
starfieldPosYAtom,
|
||||
starfieldRotYAtom,
|
||||
} from "./StarfieldAtom";
|
||||
import { useRecoilValue } from "recoil";
|
||||
|
||||
|
@ -37,17 +35,12 @@ type IntroStarfieldObjectData = {
|
|||
const Starfield = memo(() => {
|
||||
const introStarfieldGroupRef = useRef<THREE.Object3D>();
|
||||
|
||||
const starfieldPosY = useRecoilValue(starfieldPosYAtom);
|
||||
const starfieldRotY = useRecoilValue(starfieldRotYAtom);
|
||||
|
||||
const introStarfieldVisible = useRecoilValue(introStarfieldVisibilityAtom);
|
||||
const mainStarfieldVisible = useRecoilValue(mainStarfieldVisibilityAtom);
|
||||
|
||||
const mainStarfieldBoostVal = useRecoilValue(mainStarfieldBoostValAtom);
|
||||
|
||||
const starfieldState = useSpring({
|
||||
starfieldPosY: starfieldPosY,
|
||||
starfieldRotY: starfieldRotY,
|
||||
starfieldBoostVal: mainStarfieldBoostVal,
|
||||
config: { duration: 1200 },
|
||||
});
|
||||
|
@ -310,8 +303,7 @@ const Starfield = memo(() => {
|
|||
<a.group
|
||||
position={[-0.7, 0, -5]}
|
||||
rotation={[0, 0, 0]}
|
||||
position-y={starfieldState.starfieldPosY}
|
||||
rotation-y={starfieldState.starfieldRotY}
|
||||
position-y={-1}
|
||||
visible={mainStarfieldVisible}
|
||||
>
|
||||
{mainStarfieldObjects.map((obj: StarfieldObjectData) =>
|
||||
|
|
|
@ -1,15 +1,5 @@
|
|||
import { atom } from "recoil";
|
||||
|
||||
export const starfieldPosYAtom = atom({
|
||||
key: "starfieldPosYAtom",
|
||||
default: -1,
|
||||
});
|
||||
|
||||
export const starfieldRotYAtom = atom({
|
||||
key: "starfieldRotYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const introStarfieldVisibilityAtom = atom({
|
||||
key: "introStarfieldVisibilityAtom",
|
||||
default: true,
|
||||
|
|
Loading…
Reference in a new issue