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) {
|
switch (key) {
|
||||||
case "down":
|
case "down":
|
||||||
setLainMoveState(<LainMoveDown />);
|
setLainMoveState(<LainMoveDown />);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
moveCamera(1.87);
|
moveCamera(1.87);
|
||||||
}, 1400);
|
}, 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;
|
break;
|
||||||
case "left":
|
case "left":
|
||||||
rotateCamera(0.15);
|
rotateCamera(0.15);
|
||||||
|
@ -150,7 +188,7 @@ const InputHandler = () => {
|
||||||
|
|
||||||
// change noise to 0, make the ring bend downwards
|
// change noise to 0, make the ring bend downwards
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMiddleRingNoise(false);
|
setMiddleRingNoise(0);
|
||||||
setMiddleRingWobbleStrength(0.2);
|
setMiddleRingWobbleStrength(0.2);
|
||||||
}, 300);
|
}, 300);
|
||||||
|
|
||||||
|
@ -180,7 +218,7 @@ const InputHandler = () => {
|
||||||
|
|
||||||
// enable noise again in about 8~ secs
|
// enable noise again in about 8~ secs
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMiddleRingNoise(true);
|
setMiddleRingNoise(0.03);
|
||||||
}, 7800);
|
}, 7800);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -41,6 +41,7 @@ const MiddleRing = () => {
|
||||||
|
|
||||||
const middleRingWobbleState = useSpring({
|
const middleRingWobbleState = useSpring({
|
||||||
middleRingWobbleStrength: middleRingWobbleStrength,
|
middleRingWobbleStrength: middleRingWobbleStrength,
|
||||||
|
middleRingNoise: middleRingNoise,
|
||||||
config: { duration: 200 },
|
config: { duration: 200 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -59,6 +60,7 @@ const MiddleRing = () => {
|
||||||
tex: { type: "t", value: middleRingTex },
|
tex: { type: "t", value: middleRingTex },
|
||||||
uTime: { value: 1.0 },
|
uTime: { value: 1.0 },
|
||||||
wobbleStrength: { value: 0.0 },
|
wobbleStrength: { value: 0.0 },
|
||||||
|
noiseAmp: { value: 0.03 },
|
||||||
}),
|
}),
|
||||||
[middleRingTex]
|
[middleRingTex]
|
||||||
);
|
);
|
||||||
|
@ -66,9 +68,11 @@ const MiddleRing = () => {
|
||||||
const middleRingMaterialRef = useRef<THREE.ShaderMaterial>();
|
const middleRingMaterialRef = useRef<THREE.ShaderMaterial>();
|
||||||
const middleRingRef = useRef<THREE.Object3D>();
|
const middleRingRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
const noiseVertexShader = `
|
const vertexShader = `
|
||||||
varying vec2 vUv;
|
varying vec2 vUv;
|
||||||
uniform float uTime;
|
uniform float uTime;
|
||||||
|
uniform float wobbleStrength;
|
||||||
|
uniform float noiseAmp;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Description : Array and textureless GLSL 2D/3D/4D simplex
|
// Description : Array and textureless GLSL 2D/3D/4D simplex
|
||||||
|
@ -175,23 +179,7 @@ const MiddleRing = () => {
|
||||||
void main() {
|
void main() {
|
||||||
vUv = uv;
|
vUv = uv;
|
||||||
|
|
||||||
vec3 pos = position;
|
// offset of the wobble when jumping
|
||||||
float noiseFreq = 0.5;
|
|
||||||
float noiseAmp = 0.03;
|
|
||||||
vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
|
|
||||||
pos.y += snoise(noisePos) * noiseAmp;
|
|
||||||
|
|
||||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const sineVertexShader = `
|
|
||||||
varying vec2 vUv;
|
|
||||||
uniform float wobbleStrength;
|
|
||||||
|
|
||||||
void main() {
|
|
||||||
vUv = uv;
|
|
||||||
|
|
||||||
const float angleOffset = -0.8f;
|
const float angleOffset = -0.8f;
|
||||||
|
|
||||||
// compute world position of the vertex
|
// compute world position of the vertex
|
||||||
|
@ -199,11 +187,14 @@ const MiddleRing = () => {
|
||||||
vec4 worldPos = modelMatrix * vec4(position, 0.0f);
|
vec4 worldPos = modelMatrix * vec4(position, 0.0f);
|
||||||
float wobbleAngle = atan(worldPos.x, worldPos.z) + angleOffset;
|
float wobbleAngle = atan(worldPos.x, worldPos.z) + angleOffset;
|
||||||
|
|
||||||
// use the world position to move the original point up or down
|
|
||||||
vec3 pos = position;
|
vec3 pos = position;
|
||||||
pos.y += wobbleStrength * sin(wobbleAngle * 2.0f);
|
|
||||||
|
|
||||||
// transform this position into final viewspace
|
// noise modifiers
|
||||||
|
float noiseFreq = 0.5;
|
||||||
|
|
||||||
|
vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
|
||||||
|
pos.y += snoise(noisePos) * noiseAmp + wobbleStrength * sin(wobbleAngle * 2.0f);
|
||||||
|
|
||||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -225,6 +216,8 @@ const MiddleRing = () => {
|
||||||
if (middleRingMaterialRef.current) {
|
if (middleRingMaterialRef.current) {
|
||||||
middleRingMaterialRef.current.uniforms.uTime.value = clock.getElapsedTime();
|
middleRingMaterialRef.current.uniforms.uTime.value = clock.getElapsedTime();
|
||||||
middleRingMaterialRef.current.uniforms.wobbleStrength.value = middleRingWobbleState.middleRingWobbleStrength.get();
|
middleRingMaterialRef.current.uniforms.wobbleStrength.value = middleRingWobbleState.middleRingWobbleStrength.get();
|
||||||
|
middleRingMaterialRef.current.uniforms.noiseAmp.value = middleRingWobbleState.middleRingNoise.get();
|
||||||
|
|
||||||
middleRingMaterialRef.current.needsUpdate = true;
|
middleRingMaterialRef.current.needsUpdate = true;
|
||||||
}
|
}
|
||||||
if (middleRingRotating) {
|
if (middleRingRotating) {
|
||||||
|
@ -243,29 +236,16 @@ const MiddleRing = () => {
|
||||||
rotation={[0, 0.9, 0]}
|
rotation={[0, 0.9, 0]}
|
||||||
rotation-x={middleRingRotState.middleRingRotX}
|
rotation-x={middleRingRotState.middleRingRotX}
|
||||||
>
|
>
|
||||||
{middleRingNoise ? (
|
|
||||||
<shaderMaterial
|
<shaderMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
color={0x8cffde}
|
color={0x8cffde}
|
||||||
side={THREE.DoubleSide}
|
side={THREE.DoubleSide}
|
||||||
uniforms={uniforms}
|
uniforms={uniforms}
|
||||||
vertexShader={noiseVertexShader}
|
vertexShader={vertexShader}
|
||||||
fragmentShader={fragmentShader}
|
fragmentShader={fragmentShader}
|
||||||
ref={middleRingMaterialRef}
|
ref={middleRingMaterialRef}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
<shaderMaterial
|
|
||||||
attach="material"
|
|
||||||
color={0x8cffde}
|
|
||||||
side={THREE.DoubleSide}
|
|
||||||
uniforms={uniforms}
|
|
||||||
vertexShader={sineVertexShader}
|
|
||||||
fragmentShader={fragmentShader}
|
|
||||||
ref={middleRingMaterialRef}
|
|
||||||
transparent={true}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</a.mesh>
|
</a.mesh>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -12,7 +12,7 @@ export const middleRingRotatingAtom = atom({
|
||||||
|
|
||||||
export const middleRingNoiseAtom = atom({
|
export const middleRingNoiseAtom = atom({
|
||||||
key: "middleRingNoiseAtom",
|
key: "middleRingNoiseAtom",
|
||||||
default: true,
|
default: 0.03,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const middleRingPosYAtom = atom({
|
export const middleRingPosYAtom = atom({
|
||||||
|
|
Loading…
Reference in a new issue