diff --git a/src/components/Game.tsx b/src/components/Game.tsx index ee2a111..31eceb2 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -17,6 +17,7 @@ import Lain, { import Lights from "./Lights"; import OrthoCamera from "./OrthoCamera"; import Preloader from "./Preloader"; +import Starfield from "./Starfield"; type KeyCodeAssociations = { [keyCode: number]: string; @@ -285,7 +286,7 @@ const Game = () => { rotation-y={camRotY} > - + {/* { lainPosY={lainPosY} /> - { bigHUDScale={currentSpriteHUD!["big"]["scale"]} orthoCameraPosY={orthoCameraPosY} id={currentSpriteHUD!["id"]} - /> + /> */} + + + diff --git a/src/components/Starfield.tsx b/src/components/Starfield.tsx new file mode 100644 index 0000000..7b18905 --- /dev/null +++ b/src/components/Starfield.tsx @@ -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 ( + + + + + + + + + + + + + + + ); +}; + +export default Starfield;