mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
adding starfield
This commit is contained in:
parent
0c9bb90b9a
commit
e8c4b4f8ad
2 changed files with 109 additions and 3 deletions
|
@ -17,6 +17,7 @@ import Lain, {
|
||||||
import Lights from "./Lights";
|
import Lights from "./Lights";
|
||||||
import OrthoCamera from "./OrthoCamera";
|
import OrthoCamera from "./OrthoCamera";
|
||||||
import Preloader from "./Preloader";
|
import Preloader from "./Preloader";
|
||||||
|
import Starfield from "./Starfield";
|
||||||
|
|
||||||
type KeyCodeAssociations = {
|
type KeyCodeAssociations = {
|
||||||
[keyCode: number]: string;
|
[keyCode: number]: string;
|
||||||
|
@ -285,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}
|
||||||
|
@ -293,7 +294,6 @@ const Game = () => {
|
||||||
lainPosY={lainPosY}
|
lainPosY={lainPosY}
|
||||||
/>
|
/>
|
||||||
<Hub currentSprite={currentSprite} />
|
<Hub currentSprite={currentSprite} />
|
||||||
<Lights />
|
|
||||||
<OrthoCamera
|
<OrthoCamera
|
||||||
longHUDPosX={longHUDPosX}
|
longHUDPosX={longHUDPosX}
|
||||||
bigHUDPosX={bigHUDPosX}
|
bigHUDPosX={bigHUDPosX}
|
||||||
|
@ -318,7 +318,10 @@ const Game = () => {
|
||||||
bigHUDScale={currentSpriteHUD!["big"]["scale"]}
|
bigHUDScale={currentSpriteHUD!["big"]["scale"]}
|
||||||
orthoCameraPosY={orthoCameraPosY}
|
orthoCameraPosY={orthoCameraPosY}
|
||||||
id={currentSpriteHUD!["id"]}
|
id={currentSpriteHUD!["id"]}
|
||||||
/>
|
/> */}
|
||||||
|
<OrbitControls />
|
||||||
|
<Starfield />
|
||||||
|
<Lights />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</a.perspectiveCamera>
|
</a.perspectiveCamera>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
103
src/components/Starfield.tsx
Normal file
103
src/components/Starfield.tsx
Normal file
|
@ -0,0 +1,103 @@
|
||||||
|
import React, { useMemo } from "react";
|
||||||
|
import * as THREE from "three";
|
||||||
|
|
||||||
|
const Starfield = () => {
|
||||||
|
const blueUniforms = useMemo(
|
||||||
|
() => ({
|
||||||
|
color1: {
|
||||||
|
value: new THREE.Color("white"),
|
||||||
|
},
|
||||||
|
color2: {
|
||||||
|
value: new THREE.Color("blue"),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const cyanUniforms = useMemo(
|
||||||
|
() => ({
|
||||||
|
color1: {
|
||||||
|
value: new THREE.Color("white"),
|
||||||
|
},
|
||||||
|
color2: {
|
||||||
|
value: new THREE.Color("cyan"),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const whiteUniforms = useMemo(
|
||||||
|
() => ({
|
||||||
|
color1: {
|
||||||
|
value: new THREE.Color("white"),
|
||||||
|
},
|
||||||
|
color2: {
|
||||||
|
value: new THREE.Color("gray"),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const vertexShader = `
|
||||||
|
varying vec2 vUv;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
vUv = uv;
|
||||||
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const fragmentShader = `
|
||||||
|
uniform vec3 color1;
|
||||||
|
uniform vec3 color2;
|
||||||
|
|
||||||
|
varying vec2 vUv;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
float alpha = smoothstep(0.0, 1.0, vUv.y);
|
||||||
|
float colorMix = smoothstep(1.0, 2.0, 1.8);
|
||||||
|
|
||||||
|
gl_FragColor = vec4(mix(color1, color2, colorMix), alpha);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Starfield;
|
Loading…
Reference in a new issue