mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added starfield, needs optimization
This commit is contained in:
parent
e8c4b4f8ad
commit
19560f439e
4 changed files with 207 additions and 39 deletions
|
@ -286,7 +286,7 @@ const Game = () => {
|
||||||
rotation-y={camRotY}
|
rotation-y={camRotY}
|
||||||
>
|
>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
{/* <OrbitControls />
|
<OrbitControls />
|
||||||
<Preloader />
|
<Preloader />
|
||||||
<Lain
|
<Lain
|
||||||
isLainMoving={isLainMoving}
|
isLainMoving={isLainMoving}
|
||||||
|
@ -318,7 +318,7 @@ const Game = () => {
|
||||||
bigHUDScale={currentSpriteHUD!["big"]["scale"]}
|
bigHUDScale={currentSpriteHUD!["big"]["scale"]}
|
||||||
orthoCameraPosY={orthoCameraPosY}
|
orthoCameraPosY={orthoCameraPosY}
|
||||||
id={currentSpriteHUD!["id"]}
|
id={currentSpriteHUD!["id"]}
|
||||||
/> */}
|
/>
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
<Starfield />
|
<Starfield />
|
||||||
<Lights />
|
<Lights />
|
||||||
|
|
|
@ -28,7 +28,6 @@ const GrayRing = (props: GrayRingProps) => {
|
||||||
scale={[1.3, 1.3, 1.3]}
|
scale={[1.3, 1.3, 1.3]}
|
||||||
position={[0, props.grayRingPosY, 0]}
|
position={[0, props.grayRingPosY, 0]}
|
||||||
rotation={[0, 0.26, 0]}
|
rotation={[0, 0.26, 0]}
|
||||||
dispose={null}
|
|
||||||
>
|
>
|
||||||
<mesh geometry={nodes.Circle.geometry} rotation={[0, Math.PI / 4, 0]}>
|
<mesh geometry={nodes.Circle.geometry} rotation={[0, Math.PI / 4, 0]}>
|
||||||
<meshLambertMaterial
|
<meshLambertMaterial
|
||||||
|
|
|
@ -44,7 +44,6 @@ const PurpleRing = (props: PurpleRingProps) => {
|
||||||
position={[0, props.purpleRingPosY, 0]}
|
position={[0, props.purpleRingPosY, 0]}
|
||||||
rotation-y={purpleRingRotY}
|
rotation-y={purpleRingRotY}
|
||||||
scale={[1.3, 1.3, 1.3]}
|
scale={[1.3, 1.3, 1.3]}
|
||||||
dispose={null}
|
|
||||||
>
|
>
|
||||||
<mesh geometry={nodes.Circle002.geometry} rotation={[0, Math.PI / 4, 0]}>
|
<mesh geometry={nodes.Circle002.geometry} rotation={[0, Math.PI / 4, 0]}>
|
||||||
<meshLambertMaterial
|
<meshLambertMaterial
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo, useReducer, useRef, createRef } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
import { a, useSpring } from "@react-spring/three";
|
||||||
|
import { useFrame } from "react-three-fiber";
|
||||||
|
|
||||||
const Starfield = () => {
|
const Starfield = () => {
|
||||||
const blueUniforms = useMemo(
|
const blueUniforms = useMemo(
|
||||||
|
@ -61,9 +63,107 @@ const Starfield = () => {
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const LCG = (a: number, c: number, m: number, s: number) => () =>
|
||||||
|
(s = (s * a + c) % m);
|
||||||
|
|
||||||
|
const lcgInstance = LCG(1664525, 1013904223, 2 ** 32, 2);
|
||||||
|
|
||||||
|
const posesBlueFromRight = Array.from({ length: 40 }, () => [
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const posesBlueFromLeft = Array.from({ length: 25 }, () => [
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const posesCyanFromRight = Array.from({ length: 10 }, () => [
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const posesCyanFromLeft = Array.from({ length: 5 }, () => [
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const posesWhiteFromleft = Array.from({ length: 5 }, () => [
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const blueFromRightRef = useRef(posesBlueFromRight.map(() => createRef()));
|
||||||
|
const blueFromLeftRef = useRef(posesBlueFromLeft.map(() => createRef()));
|
||||||
|
const cyanFromRightRef = useRef(posesCyanFromRight.map(() => createRef()));
|
||||||
|
const cyanFromLeftRef = useRef(posesCyanFromLeft.map(() => createRef()));
|
||||||
|
const whiteFromLeftRef = useRef(posesWhiteFromleft.map(() => createRef()));
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
blueFromRightRef.current.map((ref) => {
|
||||||
|
if ((ref.current as any).position.x < -1) {
|
||||||
|
(ref.current as any).position.x += 7.3;
|
||||||
|
(ref.current as any).position.z -= 7.3;
|
||||||
|
} else {
|
||||||
|
(ref.current as any).position.x -= 0.03;
|
||||||
|
(ref.current as any).position.z += 0.03;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
blueFromLeftRef.current.map((ref) => {
|
||||||
|
if ((ref.current as any).position.x > 3) {
|
||||||
|
(ref.current as any).position.x -= 3.3;
|
||||||
|
(ref.current as any).position.z -= 3.3;
|
||||||
|
} else {
|
||||||
|
(ref.current as any).position.x += 0.03;
|
||||||
|
(ref.current as any).position.z += 0.03;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
cyanFromRightRef.current.map((ref) => {
|
||||||
|
if ((ref.current as any).position.x < -1) {
|
||||||
|
(ref.current as any).position.x += 4.3;
|
||||||
|
(ref.current as any).position.z -= 4.3;
|
||||||
|
} else {
|
||||||
|
(ref.current as any).position.x -= 0.03;
|
||||||
|
(ref.current as any).position.z += 0.03;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
cyanFromLeftRef.current.map((ref) => {
|
||||||
|
if ((ref.current as any).position.x > 3) {
|
||||||
|
(ref.current as any).position.x -= 3.3;
|
||||||
|
(ref.current as any).position.z -= 3.3;
|
||||||
|
} else {
|
||||||
|
(ref.current as any).position.x += 0.03;
|
||||||
|
(ref.current as any).position.z += 0.03;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
whiteFromLeftRef.current.map((ref) => {
|
||||||
|
if ((ref.current as any).position.x > 3) {
|
||||||
|
(ref.current as any).position.x -= 3.3;
|
||||||
|
(ref.current as any).position.z -= 3.3;
|
||||||
|
} else {
|
||||||
|
(ref.current as any).position.x += 0.03;
|
||||||
|
(ref.current as any).position.z += 0.03;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group>
|
<group position={[-0.7, -1.5, -4]}>
|
||||||
<mesh scale={[0.01, 0.9, 1]}>
|
{posesBlueFromRight.map((pos: any, idx: number) => {
|
||||||
|
return (
|
||||||
|
<mesh
|
||||||
|
ref={(blueFromRightRef.current as any)[idx]}
|
||||||
|
scale={[0.01, 2, 1]}
|
||||||
|
rotation={[1.7, 0, 0.9]}
|
||||||
|
position={[pos[0], pos[1], pos[2]]}
|
||||||
|
key={idx}
|
||||||
|
renderOrder={-1}
|
||||||
|
>
|
||||||
<planeGeometry attach="geometry" />
|
<planeGeometry attach="geometry" />
|
||||||
<shaderMaterial
|
<shaderMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
@ -72,9 +172,43 @@ const Starfield = () => {
|
||||||
vertexShader={vertexShader}
|
vertexShader={vertexShader}
|
||||||
side={THREE.DoubleSide}
|
side={THREE.DoubleSide}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
|
depthWrite={false}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
<mesh scale={[0.01, 0.9, 1]} position={[0.1, 0, 0]}>
|
);
|
||||||
|
})}
|
||||||
|
{posesBlueFromLeft.map((pos: any, idx: number) => {
|
||||||
|
return (
|
||||||
|
<mesh
|
||||||
|
ref={(blueFromLeftRef.current as any)[idx]}
|
||||||
|
scale={[0.01, 2, 1]}
|
||||||
|
rotation={[1.7, 0, -0.9]}
|
||||||
|
position={[pos[0] - 2.4, pos[1] - 1.5, pos[2]]}
|
||||||
|
key={pos[0]}
|
||||||
|
renderOrder={-1}
|
||||||
|
>
|
||||||
|
<planeGeometry attach="geometry" />
|
||||||
|
<shaderMaterial
|
||||||
|
attach="material"
|
||||||
|
uniforms={blueUniforms}
|
||||||
|
fragmentShader={fragmentShader}
|
||||||
|
vertexShader={vertexShader}
|
||||||
|
side={THREE.DoubleSide}
|
||||||
|
transparent={true}
|
||||||
|
depthWrite={false}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{posesCyanFromRight.map((pos: any, idx: number) => {
|
||||||
|
return (
|
||||||
|
<mesh
|
||||||
|
ref={(cyanFromRightRef.current as any)[idx]}
|
||||||
|
scale={[0.01, 0.9, 1]}
|
||||||
|
position={[pos[0] - 1.3, pos[1], pos[2] + 1.5]}
|
||||||
|
rotation={[1.7, 0, 0.9]}
|
||||||
|
renderOrder={-1}
|
||||||
|
>
|
||||||
<planeGeometry attach="geometry" />
|
<planeGeometry attach="geometry" />
|
||||||
<shaderMaterial
|
<shaderMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
@ -83,9 +217,42 @@ const Starfield = () => {
|
||||||
vertexShader={vertexShader}
|
vertexShader={vertexShader}
|
||||||
side={THREE.DoubleSide}
|
side={THREE.DoubleSide}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
|
depthWrite={false}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
<mesh scale={[0.01, 0.9, 1]} position={[0.2, 0, 0]}>
|
);
|
||||||
|
})}
|
||||||
|
{posesCyanFromLeft.map((pos: any, idx: number) => {
|
||||||
|
return (
|
||||||
|
<mesh
|
||||||
|
ref={(cyanFromLeftRef.current as any)[idx]}
|
||||||
|
scale={[0.01, 0.9, 1]}
|
||||||
|
position={[pos[0] - 1.3, pos[1], pos[2] + 1.5]}
|
||||||
|
rotation={[1.7, 0, -0.9]}
|
||||||
|
renderOrder={-1}
|
||||||
|
>
|
||||||
|
<planeGeometry attach="geometry" />
|
||||||
|
<shaderMaterial
|
||||||
|
attach="material"
|
||||||
|
uniforms={cyanUniforms}
|
||||||
|
fragmentShader={fragmentShader}
|
||||||
|
vertexShader={vertexShader}
|
||||||
|
side={THREE.DoubleSide}
|
||||||
|
transparent={true}
|
||||||
|
depthWrite={false}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{posesWhiteFromleft.map((pos: any, idx: number) => {
|
||||||
|
return (
|
||||||
|
<mesh
|
||||||
|
ref={(whiteFromLeftRef.current as any)[idx]}
|
||||||
|
scale={[0.01, 0.9, 1]}
|
||||||
|
position={[pos[0] - 1.3, pos[1], pos[2] + 1.5]}
|
||||||
|
rotation={[1.7, 0, -0.9]}
|
||||||
|
renderOrder={-1}
|
||||||
|
>
|
||||||
<planeGeometry attach="geometry" />
|
<planeGeometry attach="geometry" />
|
||||||
<shaderMaterial
|
<shaderMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
@ -94,8 +261,11 @@ const Starfield = () => {
|
||||||
vertexShader={vertexShader}
|
vertexShader={vertexShader}
|
||||||
side={THREE.DoubleSide}
|
side={THREE.DoubleSide}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
|
depthWrite={false}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue