mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
tweaks, starfield done for now
This commit is contained in:
parent
29ed34cd1e
commit
7d2d114ecc
7 changed files with 136 additions and 93 deletions
|
@ -21,6 +21,7 @@ import { camPosYAtom, camRotYAtom } from "./MainScene/CameraAtom";
|
||||||
import { starfieldPosYAtom } from "./Starfield/StarfieldAtom";
|
import { starfieldPosYAtom } from "./Starfield/StarfieldAtom";
|
||||||
import { currentHUDAtom } from "./HUD/CurrentHUDAtom";
|
import { currentHUDAtom } from "./HUD/CurrentHUDAtom";
|
||||||
import { SpriteHuds } from "./HUD/HUDElement";
|
import { SpriteHuds } from "./HUD/HUDElement";
|
||||||
|
import { orthoCamPosYAtom } from "./OrthoCamera/OrthoCameraAtom";
|
||||||
|
|
||||||
type KeyCodeAssociations = {
|
type KeyCodeAssociations = {
|
||||||
[keyCode: number]: string;
|
[keyCode: number]: string;
|
||||||
|
@ -57,6 +58,8 @@ const InputHandler = () => {
|
||||||
const setCamPosY = useSetRecoilState(camPosYAtom);
|
const setCamPosY = useSetRecoilState(camPosYAtom);
|
||||||
const setCamRotY = useSetRecoilState(camRotYAtom);
|
const setCamRotY = useSetRecoilState(camRotYAtom);
|
||||||
|
|
||||||
|
const setOrthoCamPosY = useSetRecoilState(orthoCamPosYAtom);
|
||||||
|
|
||||||
const setLainPosY = useSetRecoilState(lainPosYAtom);
|
const setLainPosY = useSetRecoilState(lainPosYAtom);
|
||||||
|
|
||||||
const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom);
|
const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom);
|
||||||
|
@ -65,9 +68,10 @@ const InputHandler = () => {
|
||||||
(val: number) => {
|
(val: number) => {
|
||||||
setCamPosY((prev: number) => prev + val);
|
setCamPosY((prev: number) => prev + val);
|
||||||
setLainPosY((prev: number) => prev - val);
|
setLainPosY((prev: number) => prev - val);
|
||||||
setStarfieldPosY((prev: number) => prev + val);
|
setStarfieldPosY((prev: number) => prev - val);
|
||||||
|
setOrthoCamPosY((prev: number) => prev - val);
|
||||||
},
|
},
|
||||||
[setCamPosY, setLainPosY, setStarfieldPosY]
|
[setCamPosY, setLainPosY, setStarfieldPosY, setOrthoCamPosY]
|
||||||
);
|
);
|
||||||
|
|
||||||
const rotateCamera = useCallback(
|
const rotateCamera = useCallback(
|
||||||
|
@ -97,7 +101,7 @@ const InputHandler = () => {
|
||||||
setLainMoveState(<LainMoveDown />);
|
setLainMoveState(<LainMoveDown />);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
moveCamera(1.87);
|
moveCamera(1.87);
|
||||||
}, 1300);
|
}, 1400);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case "left":
|
case "left":
|
||||||
|
@ -128,7 +132,7 @@ const InputHandler = () => {
|
||||||
setLainMoveState(<LainStanding />);
|
setLainMoveState(<LainStanding />);
|
||||||
}, (lain_animations as LainAnimations)[key]["duration"]);
|
}, (lain_animations as LainAnimations)[key]["duration"]);
|
||||||
},
|
},
|
||||||
[moveCamera, rotateCamera, setLainMoveState]
|
[moveCamera, rotateCamera, setLainMoveState, setLainMoving]
|
||||||
);
|
);
|
||||||
|
|
||||||
const updateHUD = useCallback(() => {
|
const updateHUD = useCallback(() => {
|
||||||
|
@ -137,7 +141,6 @@ const InputHandler = () => {
|
||||||
|
|
||||||
const moveDispatcher = useCallback(
|
const moveDispatcher = useCallback(
|
||||||
(move: string, key: string) => {
|
(move: string, key: string) => {
|
||||||
console.log(move[0]);
|
|
||||||
switch (move[0]) {
|
switch (move[0]) {
|
||||||
// do nothing / cant move
|
// do nothing / cant move
|
||||||
case undefined:
|
case undefined:
|
||||||
|
@ -205,8 +208,6 @@ const InputHandler = () => {
|
||||||
if (key && !lainMoving) {
|
if (key && !lainMoving) {
|
||||||
const move = getMove(currentSprite, key);
|
const move = getMove(currentSprite, key);
|
||||||
|
|
||||||
console.log(key);
|
|
||||||
|
|
||||||
moveDispatcher(move, key);
|
moveDispatcher(move, key);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { a, Interpolation, useSpring } from "@react-spring/three";
|
import {a, useSpring} from "@react-spring/three";
|
||||||
import React, {Suspense, useState} from "react";
|
import React, {Suspense, useState} from "react";
|
||||||
import {useFrame, useLoader} from "react-three-fiber";
|
import {useFrame, useLoader} from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
|
|
@ -1,9 +1,13 @@
|
||||||
import React, { memo } from "react";
|
import React, { memo } from "react";
|
||||||
|
|
||||||
const Lights = memo(() => {
|
type LightProps = {
|
||||||
|
ambientLightVal: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Lights = memo((props: LightProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ambientLight color={0x808080} />
|
<ambientLight color={0x808080} intensity={props.ambientLightVal} />
|
||||||
<pointLight color={0xffffff} position={[0, 0, 700]} intensity={0.5} />
|
<pointLight color={0xffffff} position={[0, 0, 700]} intensity={0.5} />
|
||||||
<pointLight color={0x7f7f7f} position={[0, 1000, 0]} intensity={1} />
|
<pointLight color={0x7f7f7f} position={[0, 1000, 0]} intensity={1} />
|
||||||
<pointLight color={0xffffff} position={[0, 0, 0]} intensity={0.1} />
|
<pointLight color={0xffffff} position={[0, 0, 0]} intensity={0.1} />
|
||||||
|
|
|
@ -19,11 +19,12 @@ const MainScene = () => {
|
||||||
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
||||||
|
|
||||||
const [isIntro, setIsIntro] = useState(true);
|
const [isIntro, setIsIntro] = useState(true);
|
||||||
const [mainStarfieldVisible, setMainStarfieldVisible] = useState(false);
|
|
||||||
|
|
||||||
const camPosY = useRecoilValue(camPosYAtom);
|
const camPosY = useRecoilValue(camPosYAtom);
|
||||||
const camRotY = useRecoilValue(camRotYAtom);
|
const camRotY = useRecoilValue(camRotYAtom);
|
||||||
|
|
||||||
|
const [ambientLightVal, setAmbientLightVal] = useState(0.4);
|
||||||
|
|
||||||
const cameraState = useSpring({
|
const cameraState = useSpring({
|
||||||
camPosY: camPosY,
|
camPosY: camPosY,
|
||||||
camRotY: camRotY,
|
camRotY: camRotY,
|
||||||
|
@ -62,6 +63,7 @@ const MainScene = () => {
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setIsIntro(false);
|
setIsIntro(false);
|
||||||
|
setAmbientLightVal(1.0);
|
||||||
document.getElementsByTagName("canvas")[0].className =
|
document.getElementsByTagName("canvas")[0].className =
|
||||||
"hub-background";
|
"hub-background";
|
||||||
}, 300);
|
}, 300);
|
||||||
|
@ -87,11 +89,8 @@ const MainScene = () => {
|
||||||
<Preloader />
|
<Preloader />
|
||||||
<Hub />
|
<Hub />
|
||||||
<OrthoCamera orbVisibility={!isIntro} hudVisibility={!isIntro} />
|
<OrthoCamera orbVisibility={!isIntro} hudVisibility={!isIntro} />
|
||||||
<Starfield
|
<Starfield introStarfieldVisible={isIntro} />
|
||||||
mainStarfieldVisible={mainStarfieldVisible}
|
<Lights ambientLightVal={ambientLightVal} />
|
||||||
introStarfieldVisible={isIntro}
|
|
||||||
/>
|
|
||||||
<Lights />
|
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
</group>
|
</group>
|
||||||
<Lain />
|
<Lain />
|
||||||
|
|
|
@ -5,6 +5,7 @@ import HUDElement from "../HUD/HUDElement";
|
||||||
import Orb from "../Orb";
|
import Orb from "../Orb";
|
||||||
import { useRecoilValue } from "recoil";
|
import { useRecoilValue } from "recoil";
|
||||||
import { orthoCamPosYAtom } from "./OrthoCameraAtom";
|
import { orthoCamPosYAtom } from "./OrthoCameraAtom";
|
||||||
|
import { useSpring, a } from "@react-spring/three";
|
||||||
|
|
||||||
interface OrthoCameraProps {
|
interface OrthoCameraProps {
|
||||||
orbVisibility: boolean;
|
orbVisibility: boolean;
|
||||||
|
@ -17,6 +18,11 @@ const OrthoCamera = (props: OrthoCameraProps) => {
|
||||||
const virtualCam = useRef();
|
const virtualCam = useRef();
|
||||||
const orthoCameraPosY = useRecoilValue(orthoCamPosYAtom);
|
const orthoCameraPosY = useRecoilValue(orthoCamPosYAtom);
|
||||||
|
|
||||||
|
const orthoCameraState = useSpring({
|
||||||
|
orthoCameraPosY: orthoCameraPosY,
|
||||||
|
config: { duration: 1200 },
|
||||||
|
});
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
gl.autoClear = false;
|
gl.autoClear = false;
|
||||||
gl.clear();
|
gl.clear();
|
||||||
|
@ -27,10 +33,14 @@ const OrthoCamera = (props: OrthoCameraProps) => {
|
||||||
|
|
||||||
//-0.6
|
//-0.6
|
||||||
return (
|
return (
|
||||||
<orthographicCamera ref={virtualCam} position={[0, orthoCameraPosY, 10]}>
|
<a.orthographicCamera
|
||||||
|
ref={virtualCam}
|
||||||
|
position={[0, 0, 10]}
|
||||||
|
position-y={orthoCameraState.orthoCameraPosY}
|
||||||
|
>
|
||||||
<HUDElement key={1} hudVisibility={props.hudVisibility} />
|
<HUDElement key={1} hudVisibility={props.hudVisibility} />
|
||||||
<Orb orbVisibility={props.orbVisibility} />
|
<Orb orbVisibility={props.orbVisibility} />
|
||||||
</orthographicCamera>
|
</a.orthographicCamera>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,17 +1,25 @@
|
||||||
import { a, Interpolation, useSpring } from "@react-spring/three";
|
import { a, Interpolation, useSpring } from "@react-spring/three";
|
||||||
import React, {createRef, memo, RefObject, useEffect, useMemo, useRef} from "react";
|
import React, {
|
||||||
|
createRef,
|
||||||
|
memo,
|
||||||
|
RefObject,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { starfieldPosYAtom } from "./StarfieldAtom";
|
import { starfieldPosYAtom } from "./StarfieldAtom";
|
||||||
|
import { useRecoilValue } from "recoil";
|
||||||
|
|
||||||
type StarRefsAndIncrementors = [
|
type StarRefsAndInitialPoses = [
|
||||||
React.MutableRefObject<React.RefObject<THREE.Object3D>[]>,
|
React.MutableRefObject<React.RefObject<THREE.Object3D>[]>,
|
||||||
number
|
number[][]
|
||||||
][];
|
][];
|
||||||
|
|
||||||
type StarfieldProps = {
|
type StarfieldProps = {
|
||||||
introStarfieldVisible: boolean;
|
introStarfieldVisible: boolean;
|
||||||
mainStarfieldVisible: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type StarfieldObjectData = {
|
type StarfieldObjectData = {
|
||||||
|
@ -35,22 +43,15 @@ type IntroStarfieldObjectData = {
|
||||||
const Starfield = memo((props: StarfieldProps) => {
|
const Starfield = memo((props: StarfieldProps) => {
|
||||||
const introStarfieldGroupRef = useRef<THREE.Object3D>();
|
const introStarfieldGroupRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
|
const [mainStarfieldVisible, setMainStarfieldVisible] = useState(false);
|
||||||
|
|
||||||
|
const starfieldPosY = useRecoilValue(starfieldPosYAtom);
|
||||||
|
|
||||||
const starfieldState = useSpring({
|
const starfieldState = useSpring({
|
||||||
starfieldPosY: starfieldPosYAtom,
|
starfieldPosY: starfieldPosY,
|
||||||
config: { duration: 1200 },
|
config: { duration: 1200 },
|
||||||
});
|
});
|
||||||
|
|
||||||
const uniformConstructor = (col: string) => {
|
|
||||||
return {
|
|
||||||
color1: {
|
|
||||||
value: new THREE.Color("white"),
|
|
||||||
},
|
|
||||||
color2: {
|
|
||||||
value: new THREE.Color(col),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const vertexShader = `
|
const vertexShader = `
|
||||||
varying vec2 vUv;
|
varying vec2 vUv;
|
||||||
|
|
||||||
|
@ -80,6 +81,17 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
|
|
||||||
const lcgInstance = LCG(1664525, 1013904223, 2 ** 32, 2);
|
const lcgInstance = LCG(1664525, 1013904223, 2 ** 32, 2);
|
||||||
|
|
||||||
|
const uniformConstructor = (col: string) => {
|
||||||
|
return {
|
||||||
|
color1: {
|
||||||
|
value: new THREE.Color("white"),
|
||||||
|
},
|
||||||
|
color2: {
|
||||||
|
value: new THREE.Color(col),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
const [blueUniforms, cyanUniforms, whiteUniforms] = [
|
const [blueUniforms, cyanUniforms, whiteUniforms] = [
|
||||||
"blue",
|
"blue",
|
||||||
"cyan",
|
"cyan",
|
||||||
|
@ -91,11 +103,12 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
posesBlueFromLeft,
|
posesBlueFromLeft,
|
||||||
posesCyanFromRight,
|
posesCyanFromRight,
|
||||||
posesCyanFromLeft,
|
posesCyanFromLeft,
|
||||||
|
posesWhiteFromRight,
|
||||||
posesWhiteFromLeft,
|
posesWhiteFromLeft,
|
||||||
] = [30, 30, 20, 20, 5].map((x) =>
|
] = [5, 5, 5, 5, 5, 5].map((x) =>
|
||||||
Array.from({ length: x }, () => [
|
Array.from({ length: x }, () => [
|
||||||
lcgInstance() / 1000000000,
|
lcgInstance() / 1000000000,
|
||||||
lcgInstance() / 1000000000,
|
lcgInstance() / 1000000000 - 1,
|
||||||
lcgInstance() / 1000000000,
|
lcgInstance() / 1000000000,
|
||||||
])
|
])
|
||||||
);
|
);
|
||||||
|
@ -105,12 +118,14 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
blueFromLeftRef,
|
blueFromLeftRef,
|
||||||
cyanFromRightRef,
|
cyanFromRightRef,
|
||||||
cyanFromLeftRef,
|
cyanFromLeftRef,
|
||||||
|
whiteFromRightRef,
|
||||||
whiteFromLeftRef,
|
whiteFromLeftRef,
|
||||||
] = [
|
] = [
|
||||||
posesBlueFromRight,
|
posesBlueFromRight,
|
||||||
posesBlueFromLeft,
|
posesBlueFromLeft,
|
||||||
posesCyanFromRight,
|
posesCyanFromRight,
|
||||||
posesCyanFromLeft,
|
posesCyanFromLeft,
|
||||||
|
posesWhiteFromRight,
|
||||||
posesWhiteFromLeft,
|
posesWhiteFromLeft,
|
||||||
].map((poses) =>
|
].map((poses) =>
|
||||||
useRef<RefObject<THREE.Object3D>[]>(
|
useRef<RefObject<THREE.Object3D>[]>(
|
||||||
|
@ -140,48 +155,54 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
// these arrays contain refs to the 3d planes and the increment values that they should move with across
|
const fromRightStarRefsAndInitialPoses: StarRefsAndInitialPoses = [
|
||||||
// the screen
|
[blueFromRightRef, posesBlueFromRight],
|
||||||
const fromRightStarRefsAndIncrementors: StarRefsAndIncrementors = [
|
[cyanFromRightRef, posesCyanFromRight],
|
||||||
[blueFromRightRef, 7.3],
|
[whiteFromRightRef, posesWhiteFromRight],
|
||||||
[cyanFromRightRef, 4.3],
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const fromLeftStarRefsAndIncrementors: StarRefsAndIncrementors = [
|
const fromLeftStarRefsAndInitialPoses: StarRefsAndInitialPoses = [
|
||||||
[blueFromLeftRef, 8.3],
|
[blueFromLeftRef, posesBlueFromLeft],
|
||||||
[cyanFromLeftRef, 3.7],
|
[cyanFromLeftRef, posesCyanFromLeft],
|
||||||
[whiteFromLeftRef, 3.3],
|
[whiteFromLeftRef, posesWhiteFromLeft],
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const starSpeeds = Array.from(
|
||||||
|
{ length: 60 },
|
||||||
|
() => lcgInstance() / 100000000000
|
||||||
|
);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (props.introStarfieldVisible) {
|
if (props.introStarfieldVisible) {
|
||||||
introStarfieldGroupRef.current!.position.y += 0.2;
|
introStarfieldGroupRef.current!.position.y += 0.2;
|
||||||
}
|
}
|
||||||
if (props.mainStarfieldVisible) {
|
if (mainStarfieldVisible) {
|
||||||
// planes (stars) coming from right move to positive X and negative Z direction
|
// planes (stars) coming from right move to positive X and negative Z direction
|
||||||
fromRightStarRefsAndIncrementors.forEach((el) => {
|
fromRightStarRefsAndInitialPoses.forEach((el) => {
|
||||||
el[0].current.forEach((posRef: RefObject<THREE.Object3D>) => {
|
el[0].current.forEach(
|
||||||
|
(posRef: RefObject<THREE.Object3D>, idx: number) => {
|
||||||
if (posRef.current!.position.x < -1) {
|
if (posRef.current!.position.x < -1) {
|
||||||
posRef.current!.position.x += el[1];
|
posRef.current!.position.x = el[1][idx][0] + 6;
|
||||||
posRef.current!.position.z -= el[1];
|
posRef.current!.position.z = el[1][idx][2] - 2.5;
|
||||||
} else {
|
|
||||||
posRef.current!.position.x -= 0.03;
|
|
||||||
posRef.current!.position.z += 0.03;
|
|
||||||
}
|
}
|
||||||
|
posRef.current!.position.x -= 0.03 + starSpeeds[idx];
|
||||||
|
posRef.current!.position.z += 0.035;
|
||||||
|
}
|
||||||
|
);
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
// the ones that are coming from left move to negative X and Z
|
// the ones that are coming from left move to negative X and Z
|
||||||
fromLeftStarRefsAndIncrementors.forEach((el) => {
|
fromLeftStarRefsAndInitialPoses.forEach((el) => {
|
||||||
el[0].current.forEach((posRef: RefObject<THREE.Object3D>) => {
|
el[0].current.forEach(
|
||||||
|
(posRef: RefObject<THREE.Object3D>, idx: number) => {
|
||||||
if (posRef.current!.position.x > 3) {
|
if (posRef.current!.position.x > 3) {
|
||||||
posRef.current!.position.x -= el[1];
|
posRef.current!.position.x = el[1][idx][0] - 9;
|
||||||
posRef.current!.position.z -= el[1];
|
posRef.current!.position.z = el[1][idx][2] - 0.5;
|
||||||
} else {
|
} else {
|
||||||
posRef.current!.position.x += 0.03;
|
posRef.current!.position.x += 0.03 + starSpeeds[idx];
|
||||||
posRef.current!.position.z += 0.03;
|
posRef.current!.position.z += 0.015;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -190,36 +211,43 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
{
|
{
|
||||||
starPoses: posesBlueFromRight,
|
starPoses: posesBlueFromRight,
|
||||||
ref: blueFromRightRef,
|
ref: blueFromRightRef,
|
||||||
rotation: [1.7, 0, 0.9],
|
rotation: [1.7, 0, 1],
|
||||||
positionSpecifier: [0, 0, 0],
|
positionSpecifier: [6, 0, -2.5],
|
||||||
uniform: blueUniforms,
|
uniform: blueUniforms,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
starPoses: posesBlueFromLeft,
|
starPoses: posesBlueFromLeft,
|
||||||
ref: blueFromLeftRef,
|
ref: blueFromLeftRef,
|
||||||
rotation: [1.7, 0, -0.9],
|
rotation: [1.7, 0, -1.2],
|
||||||
positionSpecifier: [-2.4, -0.5, 2],
|
positionSpecifier: [-2.4, -0.5, 2],
|
||||||
uniform: blueUniforms,
|
uniform: blueUniforms,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
starPoses: posesCyanFromRight,
|
starPoses: posesCyanFromRight,
|
||||||
ref: cyanFromRightRef,
|
ref: cyanFromRightRef,
|
||||||
rotation: [1.7, 0, 0.9],
|
rotation: [1.7, 0, 1],
|
||||||
positionSpecifier: [-1.3, 0, 1.5],
|
positionSpecifier: [6, 0, -2.5],
|
||||||
uniform: cyanUniforms,
|
uniform: cyanUniforms,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
starPoses: posesCyanFromLeft,
|
starPoses: posesCyanFromLeft,
|
||||||
ref: cyanFromLeftRef,
|
ref: cyanFromLeftRef,
|
||||||
rotation: [1.7, 0, -0.9],
|
rotation: [1.7, 0, -1.2],
|
||||||
positionSpecifier: [-1.3, 0, 2.5],
|
positionSpecifier: [-1.3, 0, 2.5],
|
||||||
uniform: cyanUniforms,
|
uniform: cyanUniforms,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
starPoses: posesWhiteFromLeft,
|
starPoses: posesWhiteFromLeft,
|
||||||
ref: whiteFromLeftRef,
|
ref: whiteFromLeftRef,
|
||||||
rotation: [1.7, 0, -0.9],
|
rotation: [1.7, 0, -1.2],
|
||||||
positionSpecifier: [-1.3, 0.5, 1.5],
|
positionSpecifier: [-1.3, 0.5, 2.3],
|
||||||
|
uniform: whiteUniforms,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
starPoses: posesWhiteFromRight,
|
||||||
|
ref: whiteFromRightRef,
|
||||||
|
rotation: [1.7, 0, 1],
|
||||||
|
positionSpecifier: [-1.3, 0.5, -2.5],
|
||||||
uniform: whiteUniforms,
|
uniform: whiteUniforms,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -243,8 +271,11 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
];
|
];
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('ssd')
|
setTimeout(() => {
|
||||||
}, [])
|
setMainStarfieldVisible(true);
|
||||||
|
console.log("123");
|
||||||
|
}, 1800);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -264,7 +295,7 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
key={pos[0]}
|
key={pos[0]}
|
||||||
renderOrder={-1}
|
renderOrder={-1}
|
||||||
>
|
>
|
||||||
<planeGeometry attach="geometry" />
|
<planeBufferGeometry attach="geometry" />
|
||||||
<shaderMaterial
|
<shaderMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
uniforms={obj.uniform}
|
uniforms={obj.uniform}
|
||||||
|
@ -282,8 +313,8 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
<a.group
|
<a.group
|
||||||
position={[-0.7, 0, -5]}
|
position={[-0.7, 0, -5]}
|
||||||
rotation={[0, 0, 0]}
|
rotation={[0, 0, 0]}
|
||||||
position-y={starfieldPosYAtom}
|
position-y={starfieldState.starfieldPosY}
|
||||||
visible={props.mainStarfieldVisible}
|
visible={mainStarfieldVisible}
|
||||||
>
|
>
|
||||||
{mainStarfieldObjects.map((obj: StarfieldObjectData) =>
|
{mainStarfieldObjects.map((obj: StarfieldObjectData) =>
|
||||||
obj.starPoses.map((pos: number[], idx: number) => {
|
obj.starPoses.map((pos: number[], idx: number) => {
|
||||||
|
@ -296,20 +327,18 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
pos[2] + obj.positionSpecifier[2],
|
pos[2] + obj.positionSpecifier[2],
|
||||||
]}
|
]}
|
||||||
rotation={obj.rotation as [number, number, number]}
|
rotation={obj.rotation as [number, number, number]}
|
||||||
scale={[0.01, 2, -0.5]}
|
scale={[0.01, 2, 0.01]}
|
||||||
renderOrder={-1}
|
renderOrder={-1}
|
||||||
key={pos[0]}
|
key={pos[0]}
|
||||||
>
|
>
|
||||||
<planeGeometry attach="geometry" />
|
<boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
|
||||||
<a.shaderMaterial
|
<a.shaderMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
uniforms={obj.uniform}
|
uniforms={obj.uniform}
|
||||||
fragmentShader={fragmentShader}
|
fragmentShader={fragmentShader}
|
||||||
vertexShader={vertexShader}
|
vertexShader={vertexShader}
|
||||||
side={THREE.DoubleSide}
|
|
||||||
transparent={true}
|
transparent={true}
|
||||||
depthWrite={false}
|
depthWrite={false}
|
||||||
opacity={0.1}
|
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
);
|
);
|
||||||
|
|
|
@ -2,6 +2,6 @@ import { atom } from "recoil";
|
||||||
|
|
||||||
export const starfieldPosYAtom = atom({
|
export const starfieldPosYAtom = atom({
|
||||||
key: "starfieldPosYAtom",
|
key: "starfieldPosYAtom",
|
||||||
default: 0,
|
default: -1,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue