mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 15:09:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

added starfield, needs optimization

Browse source
This commit is contained in:
ad044 2020-09-02 17:09:44 +04:00
parent e8c4b4f8ad
commit 19560f439e
4 changed files with 207 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Game.tsx
View file

@ -286,7 +286,7 @@ const Game = () => {
rotation-y={camRotY}
>
<Suspense fallback={null}>
{/* <OrbitControls />
<OrbitControls />
<Preloader />
<Lain
isLainMoving={isLainMoving}
@ -318,7 +318,7 @@ const Game = () => {
bigHUDScale={currentSpriteHUD!["big"]["scale"]}
orthoCameraPosY={orthoCameraPosY}
id={currentSpriteHUD!["id"]}
/> */}
/>
<OrbitControls />
<Starfield />
<Lights />

1
src/components/GrayRing.tsx
View file

@ -28,7 +28,6 @@ const GrayRing = (props: GrayRingProps) => {
scale={[1.3, 1.3, 1.3]}
position={[0, props.grayRingPosY, 0]}
rotation={[0, 0.26, 0]}
dispose={null}
>
<mesh geometry={nodes.Circle.geometry} rotation={[0, Math.PI / 4, 0]}>
<meshLambertMaterial

1
src/components/PurpleRing.tsx
View file

@ -44,7 +44,6 @@ const PurpleRing = (props: PurpleRingProps) => {
position={[0, props.purpleRingPosY, 0]}
rotation-y={purpleRingRotY}
scale={[1.3, 1.3, 1.3]}
dispose={null}
>
<mesh geometry={nodes.Circle002.geometry} rotation={[0, Math.PI / 4, 0]}>
<meshLambertMaterial

240
src/components/Starfield.tsx
View file

@ -1,5 +1,7 @@
import React, { useMemo } from "react";
import React, { useMemo, useReducer, useRef, createRef } from "react";
import * as THREE from "three";
import { a, useSpring } from "@react-spring/three";
import { useFrame } from "react-three-fiber";
const Starfield = () => {
const blueUniforms = useMemo(
@ -61,41 +63,209 @@ 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 (
<group>
<mesh scale={[0.01, 0.9, 1]}>
<planeGeometry attach="geometry" />
<shaderMaterial
attach="material"
uniforms={blueUniforms}
fragmentShader={fragmentShader}
vertexShader={vertexShader}
side={THREE.DoubleSide}
transparent={true}
/>
</mesh>
<mesh scale={[0.01, 0.9, 1]} position={[0.1, 0, 0]}>
<planeGeometry attach="geometry" />
<shaderMaterial
attach="material"
uniforms={cyanUniforms}
fragmentShader={fragmentShader}
vertexShader={vertexShader}
side={THREE.DoubleSide}
transparent={true}
/>
</mesh>
<mesh scale={[0.01, 0.9, 1]} position={[0.2, 0, 0]}>
<planeGeometry attach="geometry" />
<shaderMaterial
attach="material"
uniforms={whiteUniforms}
fragmentShader={fragmentShader}
vertexShader={vertexShader}
side={THREE.DoubleSide}
transparent={true}
/>
</mesh>
<group position={[-0.7, -1.5, -4]}>
{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" />
<shaderMaterial
attach="material"
uniforms={blueUniforms}
fragmentShader={fragmentShader}
vertexShader={vertexShader}
side={THREE.DoubleSide}
transparent={true}
depthWrite={false}
/>
</mesh>
);
})}
{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" />
<shaderMaterial
attach="material"
uniforms={cyanUniforms}
fragmentShader={fragmentShader}
vertexShader={vertexShader}
side={THREE.DoubleSide}
transparent={true}
depthWrite={false}
/>
</mesh>
);
})}
{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" />
<shaderMaterial
attach="material"
uniforms={whiteUniforms}
fragmentShader={fragmentShader}
vertexShader={vertexShader}
side={THREE.DoubleSide}
transparent={true}
depthWrite={false}
/>
</mesh>
);
})}
</group>
);
};