mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
middle ring up motion done, changed intro font
This commit is contained in:
parent
038366448c
commit
59645f22dc
4 changed files with 186 additions and 36 deletions
13
src/App.tsx
13
src/App.tsx
|
@ -4,6 +4,7 @@ import "./static/css/hub.css";
|
|||
import "./static/css/main.css";
|
||||
import { Canvas } from "react-three-fiber";
|
||||
import { RecoilRoot } from "recoil";
|
||||
import Intro from "./components/Intro";
|
||||
|
||||
const App = () => {
|
||||
const [moveToGame, setMoveToGame] = useState(false);
|
||||
|
@ -18,13 +19,13 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<div id="game-root" className="game">
|
||||
{/*<Intro setMoveToGame={setMoveToGame} />*/}
|
||||
{/* {moveToGame ? <MainScene /> : <Intro setMoveToGame={setMoveToGame} />} */}
|
||||
{/* <Intro /> */}
|
||||
<Canvas concurrent >
|
||||
<RecoilRoot>
|
||||
<MainScene />
|
||||
</RecoilRoot>
|
||||
</Canvas>
|
||||
<Canvas concurrent >
|
||||
<RecoilRoot>
|
||||
<MainScene />
|
||||
</RecoilRoot>
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -7,7 +7,7 @@ import {
|
|||
LainStanding,
|
||||
} from "./Lain/Lain";
|
||||
import { useRecoilState, useSetRecoilState } from "recoil";
|
||||
import { hudActiveAtom, currentHUDAtom } from "./HUD/HUDElementAtom";
|
||||
import { currentHUDAtom, hudActiveAtom } from "./HUD/HUDElementAtom";
|
||||
import { currentSpriteAtom } from "./LevelSprite/CurrentSpriteAtom";
|
||||
import lain_animations from "../resources/lain_animations.json";
|
||||
import level_sprite_huds from "../resources/level_sprite_huds.json";
|
||||
|
@ -22,6 +22,13 @@ import { starfieldPosYAtom } from "./Starfield/StarfieldAtom";
|
|||
import { SpriteHuds } from "./HUD/HUDElement";
|
||||
import { orthoCamPosYAtom } from "./OrthoCamera/OrthoCameraAtom";
|
||||
import { grayPlanesPosYAtom } from "./GrayPlanes/GrayPlanesAtom";
|
||||
import {
|
||||
middleRingNoiseAtom,
|
||||
middleRingPosYAtom,
|
||||
middleRingRotatingAtom,
|
||||
middleRingRotXAtom,
|
||||
middleRingWobbleStrengthAtom,
|
||||
} from "./MiddleRing/MiddleRingAtom";
|
||||
|
||||
type KeyCodeAssociations = {
|
||||
[keyCode: number]: string;
|
||||
|
@ -66,6 +73,14 @@ const InputHandler = () => {
|
|||
|
||||
const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom);
|
||||
|
||||
const setMiddleRingWobbleStrength = useSetRecoilState(
|
||||
middleRingWobbleStrengthAtom
|
||||
);
|
||||
const setMiddleRingRotating = useSetRecoilState(middleRingRotatingAtom);
|
||||
const setMiddleRingNoise = useSetRecoilState(middleRingNoiseAtom);
|
||||
const setMiddleRingPosY = useSetRecoilState(middleRingPosYAtom);
|
||||
const setMiddleRingRotX = useSetRecoilState(middleRingRotXAtom);
|
||||
|
||||
const moveCamera = useCallback(
|
||||
(val: number) => {
|
||||
setCamPosY((prev: number) => prev + val);
|
||||
|
@ -73,6 +88,14 @@ const InputHandler = () => {
|
|||
setStarfieldPosY((prev: number) => prev - val);
|
||||
setOrthoCamPosY((prev: number) => prev - val);
|
||||
setGrayPlanePosY((prev: number) => prev - val);
|
||||
|
||||
setTimeout(() => {
|
||||
setMiddleRingPosY((prev: number) => prev - (val - 0.2));
|
||||
}, 1300);
|
||||
|
||||
setTimeout(() => {
|
||||
setMiddleRingPosY((prev: number) => prev - 0.2);
|
||||
}, 1800);
|
||||
},
|
||||
[
|
||||
setCamPosY,
|
||||
|
@ -80,6 +103,7 @@ const InputHandler = () => {
|
|||
setStarfieldPosY,
|
||||
setOrthoCamPosY,
|
||||
setGrayPlanePosY,
|
||||
setMiddleRingPosY,
|
||||
]
|
||||
);
|
||||
|
||||
|
@ -119,9 +143,46 @@ const InputHandler = () => {
|
|||
break;
|
||||
case "up":
|
||||
setLainMoveState(<LainMoveUp />);
|
||||
|
||||
setTimeout(() => {
|
||||
moveCamera(-1.87);
|
||||
}, 1300);
|
||||
|
||||
// change noise to 0, make the ring bend downwards
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(false);
|
||||
setMiddleRingWobbleStrength(0.2);
|
||||
}, 300);
|
||||
|
||||
// disable rotation of the ring
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotating(false);
|
||||
}, 700);
|
||||
|
||||
// make the ring bend upwards
|
||||
setTimeout(() => {
|
||||
setMiddleRingWobbleStrength(-0.3);
|
||||
}, 1300);
|
||||
|
||||
// reset the ring bend, set the rotation to slightly curve
|
||||
// to replicate a motion effect (since its moving upwards)
|
||||
// and enable rotation again
|
||||
setTimeout(() => {
|
||||
setMiddleRingWobbleStrength(0.0);
|
||||
setMiddleRingRotX(-0.2);
|
||||
setMiddleRingRotating(true);
|
||||
}, 1500);
|
||||
|
||||
// reset the rotation value to 0
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotX(0);
|
||||
}, 2500);
|
||||
|
||||
// enable noise again in about 8~ secs
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(true);
|
||||
}, 7800);
|
||||
|
||||
break;
|
||||
case "right":
|
||||
rotateCamera(-0.1);
|
||||
|
@ -143,7 +204,16 @@ const InputHandler = () => {
|
|||
}, 300);
|
||||
}, (lain_animations as LainAnimations)[key]["duration"]);
|
||||
},
|
||||
[moveCamera, rotateCamera, setLainMoveState, setLainMoving]
|
||||
[
|
||||
moveCamera,
|
||||
rotateCamera,
|
||||
setLainMoveState,
|
||||
setLainMoving,
|
||||
setMiddleRingNoise,
|
||||
setMiddleRingRotX,
|
||||
setMiddleRingRotating,
|
||||
setMiddleRingWobbleStrength,
|
||||
]
|
||||
);
|
||||
|
||||
const updateHUD = useCallback(() => {
|
||||
|
|
|
@ -1,10 +1,19 @@
|
|||
import React, { memo, useRef } from "react";
|
||||
import React, { memo, useMemo, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import middleRingTexture from "../../static/sprites/middle_ring_tex.png";
|
||||
|
||||
import { draco } from "drei";
|
||||
import * as THREE from "three";
|
||||
import { useSpring, a } from "@react-spring/three";
|
||||
import {
|
||||
middleRingNoiseAtom,
|
||||
middleRingPosYAtom,
|
||||
middleRingRotatingAtom,
|
||||
middleRingRotXAtom,
|
||||
middleRingWobbleStrengthAtom,
|
||||
} from "./MiddleRingAtom";
|
||||
import { useRecoilValue } from "recoil";
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
nodes: {
|
||||
|
@ -15,7 +24,7 @@ type GLTFResult = GLTF & {
|
|||
};
|
||||
};
|
||||
|
||||
const MiddleRing = memo(() => {
|
||||
const MiddleRing = () => {
|
||||
const { nodes, materials } = useLoader<GLTFResult>(
|
||||
GLTFLoader,
|
||||
"/models/ring2.glb",
|
||||
|
@ -24,15 +33,40 @@ const MiddleRing = memo(() => {
|
|||
|
||||
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
||||
|
||||
const uniforms = {
|
||||
tex: { type: "t", value: middleRingTex },
|
||||
uTime: { value: 1.0 },
|
||||
};
|
||||
const middleRingWobbleStrength = useRecoilValue(middleRingWobbleStrengthAtom);
|
||||
const middleRingRotating = useRecoilValue(middleRingRotatingAtom);
|
||||
const middleRingNoise = useRecoilValue(middleRingNoiseAtom);
|
||||
const middleRingPosY = useRecoilValue(middleRingPosYAtom);
|
||||
const middleRingRotX = useRecoilValue(middleRingRotXAtom);
|
||||
|
||||
const middleRingWobbleState = useSpring({
|
||||
middleRingWobbleStrength: middleRingWobbleStrength,
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
const middleRingPosState = useSpring({
|
||||
middleRingPosY: middleRingPosY,
|
||||
config: { duration: 500 },
|
||||
});
|
||||
|
||||
const middleRingRotState = useSpring({
|
||||
middleRingRotX: middleRingRotX,
|
||||
config: { duration: 1000 },
|
||||
});
|
||||
|
||||
const uniforms = useMemo(
|
||||
() => ({
|
||||
tex: { type: "t", value: middleRingTex },
|
||||
uTime: { value: 1.0 },
|
||||
wobbleStrength: { value: 0.0 },
|
||||
}),
|
||||
[middleRingTex]
|
||||
);
|
||||
|
||||
const middleRingMaterialRef = useRef<THREE.ShaderMaterial>();
|
||||
const middleRingRef = useRef<THREE.Object3D>();
|
||||
|
||||
const vertexShader = `
|
||||
const noiseVertexShader = `
|
||||
varying vec2 vUv;
|
||||
uniform float uTime;
|
||||
|
||||
|
@ -143,7 +177,7 @@ const MiddleRing = memo(() => {
|
|||
|
||||
vec3 pos = position;
|
||||
float noiseFreq = 0.5;
|
||||
float noiseAmp = 0.05;
|
||||
float noiseAmp = 0.03;
|
||||
vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
|
||||
pos.y += snoise(noisePos) * noiseAmp;
|
||||
|
||||
|
@ -151,24 +185,28 @@ const MiddleRing = memo(() => {
|
|||
}
|
||||
`;
|
||||
|
||||
const testVertex = `
|
||||
const sineVertexShader = `
|
||||
varying vec2 vUv;
|
||||
uniform float wobbleStrength;
|
||||
|
||||
void main() {
|
||||
vUv = uv;
|
||||
|
||||
const float angleOffset = -0.8f;
|
||||
|
||||
// compute world position of the vertex
|
||||
// (ie, position after model rotation and translation)
|
||||
vec3 worldPos = modelMatrix * vec3(position, 1.0f);
|
||||
vec4 worldPos = modelMatrix * vec4(position, 0.0f);
|
||||
float wobbleAngle = atan(worldPos.x, worldPos.z) + angleOffset;
|
||||
|
||||
// use the world position to move the original point up or down
|
||||
vec3 pos = position;
|
||||
pos.y += 3.5 * sin(0.3 * worldPos.x) * sin(0.3 * worldPos.z);
|
||||
pos.y += wobbleStrength * sin(wobbleAngle * 2.0f);
|
||||
|
||||
// transform this position into final viewspace
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
const fragmentShader = `
|
||||
uniform sampler2D tex;
|
||||
|
@ -186,35 +224,50 @@ const MiddleRing = memo(() => {
|
|||
useFrame(() => {
|
||||
if (middleRingMaterialRef.current) {
|
||||
middleRingMaterialRef.current.uniforms.uTime.value = clock.getElapsedTime();
|
||||
middleRingMaterialRef.current.uniforms.wobbleStrength.value = middleRingWobbleState.middleRingWobbleStrength.get();
|
||||
middleRingMaterialRef.current.needsUpdate = true;
|
||||
}
|
||||
if (middleRingRotating) {
|
||||
middleRingRef.current!.rotation.y += 0.05;
|
||||
}
|
||||
// middleRingRef.current!.rotation.y += 0.06;
|
||||
});
|
||||
|
||||
// -0.15, 03
|
||||
return (
|
||||
<group>
|
||||
<mesh
|
||||
material={materials["Material.001"]}
|
||||
geometry={nodes.BezierCircle.geometry}
|
||||
position={[0, -0.15, 0.3]}
|
||||
scale={[0.8, 0.7, 0.8]}
|
||||
ref={middleRingRef}
|
||||
rotation={[0, -0.9, 0]}
|
||||
>
|
||||
<a.mesh
|
||||
material={materials["Material.001"]}
|
||||
geometry={nodes.BezierCircle.geometry}
|
||||
position={[0, 0, 0.3]}
|
||||
position-y={middleRingPosState.middleRingPosY}
|
||||
scale={[0.9, 0.7, 0.9]}
|
||||
ref={middleRingRef}
|
||||
rotation={[0, 0.9, 0]}
|
||||
rotation-x={middleRingRotState.middleRingRotX}
|
||||
>
|
||||
{middleRingNoise ? (
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
color={0x8cffde}
|
||||
side={THREE.DoubleSide}
|
||||
uniforms={uniforms}
|
||||
vertexShader={testVertex}
|
||||
vertexShader={noiseVertexShader}
|
||||
fragmentShader={fragmentShader}
|
||||
ref={middleRingMaterialRef}
|
||||
transparent={true}
|
||||
/>
|
||||
<meshBasicMaterial />
|
||||
</mesh>
|
||||
</group>
|
||||
) : (
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
color={0x8cffde}
|
||||
side={THREE.DoubleSide}
|
||||
uniforms={uniforms}
|
||||
vertexShader={sineVertexShader}
|
||||
fragmentShader={fragmentShader}
|
||||
ref={middleRingMaterialRef}
|
||||
transparent={true}
|
||||
/>
|
||||
)}
|
||||
</a.mesh>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
export default MiddleRing;
|
||||
|
|
26
src/components/MiddleRing/MiddleRingAtom.tsx
Normal file
26
src/components/MiddleRing/MiddleRingAtom.tsx
Normal file
|
@ -0,0 +1,26 @@
|
|||
import { atom } from "recoil";
|
||||
|
||||
export const middleRingWobbleStrengthAtom = atom({
|
||||
key: "middleRingWobbleStrengthAtom",
|
||||
default: 0.0,
|
||||
});
|
||||
|
||||
export const middleRingRotatingAtom = atom({
|
||||
key: "middleRingRotatingAtom",
|
||||
default: true,
|
||||
});
|
||||
|
||||
export const middleRingNoiseAtom = atom({
|
||||
key: "middleRingNoiseAtom",
|
||||
default: true,
|
||||
});
|
||||
|
||||
export const middleRingPosYAtom = atom({
|
||||
key: "middleRingPosYAtom",
|
||||
default: -0.15,
|
||||
});
|
||||
|
||||
export const middleRingRotXAtom = atom({
|
||||
key: "middleRingRotXAtom",
|
||||
default: 0,
|
||||
});
|
Loading…
Reference in a new issue