mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
middle ring down motion
This commit is contained in:
parent
7f36177a19
commit
5164323aac
3 changed files with 70 additions and 52 deletions
|
@ -132,10 +132,48 @@ const InputHandler = () => {
|
|||
switch (key) {
|
||||
case "down":
|
||||
setLainMoveState(<LainMoveDown />);
|
||||
|
||||
setTimeout(() => {
|
||||
moveCamera(1.87);
|
||||
}, 1400);
|
||||
|
||||
// make noise appear again
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(0.06);
|
||||
}, 800);
|
||||
|
||||
// disable rotation of the ring
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotating(false);
|
||||
}, 700);
|
||||
|
||||
// set ring rotation on x axis to craete motion effect
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotX(0.3);
|
||||
}, 1500);
|
||||
|
||||
// rotate it again, set ring noise to 0
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotX(-0.1);
|
||||
setMiddleRingNoise(0);
|
||||
}, 3500);
|
||||
|
||||
// rotate it back AGAIN (holy fuk psx game)
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotX(0.05);
|
||||
}, 4500);
|
||||
|
||||
// reset value, set noise to 0
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotX(0);
|
||||
setMiddleRingRotating(true);
|
||||
}, 4800);
|
||||
|
||||
// enable noise again in about 11-12 secs
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(0.03);
|
||||
}, 11600);
|
||||
|
||||
break;
|
||||
case "left":
|
||||
rotateCamera(0.15);
|
||||
|
@ -150,7 +188,7 @@ const InputHandler = () => {
|
|||
|
||||
// change noise to 0, make the ring bend downwards
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(false);
|
||||
setMiddleRingNoise(0);
|
||||
setMiddleRingWobbleStrength(0.2);
|
||||
}, 300);
|
||||
|
||||
|
@ -180,7 +218,7 @@ const InputHandler = () => {
|
|||
|
||||
// enable noise again in about 8~ secs
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(true);
|
||||
setMiddleRingNoise(0.03);
|
||||
}, 7800);
|
||||
|
||||
break;
|
||||
|
|
|
@ -41,6 +41,7 @@ const MiddleRing = () => {
|
|||
|
||||
const middleRingWobbleState = useSpring({
|
||||
middleRingWobbleStrength: middleRingWobbleStrength,
|
||||
middleRingNoise: middleRingNoise,
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
|
@ -59,6 +60,7 @@ const MiddleRing = () => {
|
|||
tex: { type: "t", value: middleRingTex },
|
||||
uTime: { value: 1.0 },
|
||||
wobbleStrength: { value: 0.0 },
|
||||
noiseAmp: { value: 0.03 },
|
||||
}),
|
||||
[middleRingTex]
|
||||
);
|
||||
|
@ -66,9 +68,11 @@ const MiddleRing = () => {
|
|||
const middleRingMaterialRef = useRef<THREE.ShaderMaterial>();
|
||||
const middleRingRef = useRef<THREE.Object3D>();
|
||||
|
||||
const noiseVertexShader = `
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
uniform float uTime;
|
||||
uniform float wobbleStrength;
|
||||
uniform float noiseAmp;
|
||||
|
||||
//
|
||||
// Description : Array and textureless GLSL 2D/3D/4D simplex
|
||||
|
@ -175,39 +179,26 @@ const MiddleRing = () => {
|
|||
void main() {
|
||||
vUv = uv;
|
||||
|
||||
// offset of the wobble when jumping
|
||||
const float angleOffset = -0.8f;
|
||||
|
||||
// compute world position of the vertex
|
||||
// (ie, position after model rotation and translation)
|
||||
vec4 worldPos = modelMatrix * vec4(position, 0.0f);
|
||||
float wobbleAngle = atan(worldPos.x, worldPos.z) + angleOffset;
|
||||
|
||||
vec3 pos = position;
|
||||
|
||||
// noise modifiers
|
||||
float noiseFreq = 0.5;
|
||||
float noiseAmp = 0.03;
|
||||
|
||||
vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
|
||||
pos.y += snoise(noisePos) * noiseAmp;
|
||||
pos.y += snoise(noisePos) * noiseAmp + wobbleStrength * sin(wobbleAngle * 2.0f);
|
||||
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
|
||||
}
|
||||
`;
|
||||
|
||||
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)
|
||||
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 += wobbleStrength * sin(wobbleAngle * 2.0f);
|
||||
|
||||
// transform this position into final viewspace
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShader = `
|
||||
uniform sampler2D tex;
|
||||
|
||||
|
@ -225,6 +216,8 @@ const MiddleRing = () => {
|
|||
if (middleRingMaterialRef.current) {
|
||||
middleRingMaterialRef.current.uniforms.uTime.value = clock.getElapsedTime();
|
||||
middleRingMaterialRef.current.uniforms.wobbleStrength.value = middleRingWobbleState.middleRingWobbleStrength.get();
|
||||
middleRingMaterialRef.current.uniforms.noiseAmp.value = middleRingWobbleState.middleRingNoise.get();
|
||||
|
||||
middleRingMaterialRef.current.needsUpdate = true;
|
||||
}
|
||||
if (middleRingRotating) {
|
||||
|
@ -243,29 +236,16 @@ const MiddleRing = () => {
|
|||
rotation={[0, 0.9, 0]}
|
||||
rotation-x={middleRingRotState.middleRingRotX}
|
||||
>
|
||||
{middleRingNoise ? (
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
color={0x8cffde}
|
||||
side={THREE.DoubleSide}
|
||||
uniforms={uniforms}
|
||||
vertexShader={noiseVertexShader}
|
||||
fragmentShader={fragmentShader}
|
||||
ref={middleRingMaterialRef}
|
||||
transparent={true}
|
||||
/>
|
||||
) : (
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
color={0x8cffde}
|
||||
side={THREE.DoubleSide}
|
||||
uniforms={uniforms}
|
||||
vertexShader={sineVertexShader}
|
||||
fragmentShader={fragmentShader}
|
||||
ref={middleRingMaterialRef}
|
||||
transparent={true}
|
||||
/>
|
||||
)}
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
color={0x8cffde}
|
||||
side={THREE.DoubleSide}
|
||||
uniforms={uniforms}
|
||||
vertexShader={vertexShader}
|
||||
fragmentShader={fragmentShader}
|
||||
ref={middleRingMaterialRef}
|
||||
transparent={true}
|
||||
/>
|
||||
</a.mesh>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -12,7 +12,7 @@ export const middleRingRotatingAtom = atom({
|
|||
|
||||
export const middleRingNoiseAtom = atom({
|
||||
key: "middleRingNoiseAtom",
|
||||
default: true,
|
||||
default: 0.03,
|
||||
});
|
||||
|
||||
export const middleRingPosYAtom = atom({
|
||||
|
|
Loading…
Reference in a new issue