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;