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 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}
|
||||
>
|
||||
<Suspense fallback={null}>
|
||||
<OrbitControls />
|
||||
{/* <OrbitControls />
|
||||
<Preloader />
|
||||
<Lain
|
||||
isLainMoving={isLainMoving}
|
||||
|
@ -293,7 +294,6 @@ const Game = () => {
|
|||
lainPosY={lainPosY}
|
||||
/>
|
||||
<Hub currentSprite={currentSprite} />
|
||||
<Lights />
|
||||
<OrthoCamera
|
||||
longHUDPosX={longHUDPosX}
|
||||
bigHUDPosX={bigHUDPosX}
|
||||
|
@ -318,7 +318,10 @@ const Game = () => {
|
|||
bigHUDScale={currentSpriteHUD!["big"]["scale"]}
|
||||
orthoCameraPosY={orthoCameraPosY}
|
||||
id={currentSpriteHUD!["id"]}
|
||||
/>
|
||||
/> */}
|
||||
<OrbitControls />
|
||||
<Starfield />
|
||||
<Lights />
|
||||
</Suspense>
|
||||
</a.perspectiveCamera>
|
||||
</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