mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
explosion anim line poses mostly done, need some tweaking
This commit is contained in:
parent
af0df3e250
commit
715c924cde
3 changed files with 231 additions and 6 deletions
|
@ -1,10 +1,43 @@
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo, useRef, useState } from "react";
|
||||||
import { a } from "@react-spring/three";
|
|
||||||
import * as THREE from "three";
|
|
||||||
import ExplosionLine from "./NodeExplosion/ExplosionLine";
|
import ExplosionLine from "./NodeExplosion/ExplosionLine";
|
||||||
|
import node_explosion_line_positions from "../../../../resources/node_explosion_line_positions.json";
|
||||||
|
import { useFrame } from "react-three-fiber";
|
||||||
|
|
||||||
const NodeExplosion = () => {
|
const NodeExplosion = () => {
|
||||||
return <ExplosionLine rotation={[0, 0, -0.3]} color={"#f5cc16"} length={1} />;
|
const [currentFrame, setCurrentFrame] = useState(1);
|
||||||
|
|
||||||
|
const linePoses = useMemo(
|
||||||
|
() =>
|
||||||
|
node_explosion_line_positions[
|
||||||
|
currentFrame.toString() as keyof typeof node_explosion_line_positions
|
||||||
|
],
|
||||||
|
[currentFrame]
|
||||||
|
);
|
||||||
|
|
||||||
|
const lastTime = useRef(0);
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
const now = Date.now();
|
||||||
|
if (now > lastTime.current + 2400) {
|
||||||
|
if (currentFrame < 6) {
|
||||||
|
setCurrentFrame(currentFrame + 1);
|
||||||
|
lastTime.current = now;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<group position={[-0.5, 0.45, 0]}>
|
||||||
|
{Object.values(linePoses).map((entry) => (
|
||||||
|
<ExplosionLine
|
||||||
|
rotation={entry.rotation as [number, number, number]}
|
||||||
|
position={entry.position as [number, number, number]}
|
||||||
|
color={entry.color}
|
||||||
|
length={entry.length}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</group>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default NodeExplosion;
|
export default NodeExplosion;
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { a } from "@react-spring/three";
|
||||||
|
|
||||||
type LineProps = {
|
type LineProps = {
|
||||||
rotation: number[];
|
rotation: number[];
|
||||||
|
position: number[];
|
||||||
color: string;
|
color: string;
|
||||||
length: number;
|
length: number;
|
||||||
};
|
};
|
||||||
|
@ -15,7 +16,9 @@ const ExplosionLine = (props: LineProps) => {
|
||||||
value: new THREE.Color("white"),
|
value: new THREE.Color("white"),
|
||||||
},
|
},
|
||||||
color2: {
|
color2: {
|
||||||
value: new THREE.Color(props.color),
|
value: new THREE.Color(
|
||||||
|
props.color === "yellow" ? "#f5cc16" : "#e33d00"
|
||||||
|
),
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
[props.color]
|
[props.color]
|
||||||
|
@ -38,7 +41,7 @@ const ExplosionLine = (props: LineProps) => {
|
||||||
varying vec2 vUv;
|
varying vec2 vUv;
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
float alpha = smoothstep(0.0, 1.0, vUv.y);
|
float alpha = smoothstep(1.0, 0.0, vUv.y);
|
||||||
float colorMix = smoothstep(1.0, 2.0, 1.8);
|
float colorMix = smoothstep(1.0, 2.0, 1.8);
|
||||||
|
|
||||||
gl_FragColor = vec4(mix(color1, color2, colorMix), alpha) * 0.8;
|
gl_FragColor = vec4(mix(color1, color2, colorMix), alpha) * 0.8;
|
||||||
|
@ -48,6 +51,7 @@ const ExplosionLine = (props: LineProps) => {
|
||||||
return (
|
return (
|
||||||
<mesh
|
<mesh
|
||||||
rotation={props.rotation as [number, number, number]}
|
rotation={props.rotation as [number, number, number]}
|
||||||
|
position={props.position as [number, number, number]}
|
||||||
scale={[0.01, props.length, 0]}
|
scale={[0.01, props.length, 0]}
|
||||||
renderOrder={-1}
|
renderOrder={-1}
|
||||||
>
|
>
|
||||||
|
|
188
src/resources/node_explosion_line_positions.json
Normal file
188
src/resources/node_explosion_line_positions.json
Normal file
|
@ -0,0 +1,188 @@
|
||||||
|
{
|
||||||
|
"1": [
|
||||||
|
{
|
||||||
|
"position": [0, 0.2, 0],
|
||||||
|
"rotation": [0, 0, -0.25],
|
||||||
|
"color": "red",
|
||||||
|
"length": 1.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0, -1, 0],
|
||||||
|
"rotation": [0, 0, -3],
|
||||||
|
"color": "red",
|
||||||
|
"length": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [-0.4, -0.6, 0],
|
||||||
|
"rotation": [0, 0, -4],
|
||||||
|
"color": "yellow",
|
||||||
|
"length": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.6, -0.35, 0],
|
||||||
|
"rotation": [0, 0, -1.5],
|
||||||
|
"length": 1.5,
|
||||||
|
"color": "red"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"2": [
|
||||||
|
{
|
||||||
|
"position": [0.4, -0.1, 0],
|
||||||
|
"rotation": [0, 0, -1],
|
||||||
|
"length": 1.5,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.47, -0.18, 0],
|
||||||
|
"rotation": [0, 0, -1.1],
|
||||||
|
"length": 1.6,
|
||||||
|
"color": "red"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.45, -0.25, 0],
|
||||||
|
"rotation": [0, 0, -1.2],
|
||||||
|
"length": 1.6,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0, -0.75, 0],
|
||||||
|
"rotation": [0, 0, -2.5],
|
||||||
|
"length": 0.8,
|
||||||
|
"color": "red"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [-0.25, -0.75, 0],
|
||||||
|
"rotation": [0, 0, -3.5],
|
||||||
|
"length": 0.8,
|
||||||
|
"color": "yellow"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"3": [
|
||||||
|
{
|
||||||
|
"position": [-0.7, 0, 0],
|
||||||
|
"rotation": [0, 0, 0.95],
|
||||||
|
"length": 1.5,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.4, -0.1, 0],
|
||||||
|
"rotation": [0, 0, -0.95],
|
||||||
|
"length": 1.5,
|
||||||
|
"color": "red"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.47, -0.18, 0],
|
||||||
|
"rotation": [0, 0, -1.05],
|
||||||
|
"length": 1.6,
|
||||||
|
"color": "red"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.45, -0.25, 0],
|
||||||
|
"rotation": [0, 0, -1.15],
|
||||||
|
"length": 1.5,
|
||||||
|
"color": "red"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.5, -0.6, 0],
|
||||||
|
"rotation": [0, 0, -1.7],
|
||||||
|
"length": 1.5,
|
||||||
|
"color": "red"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"4": [
|
||||||
|
{
|
||||||
|
"position": [-0.2, -0.05, 0],
|
||||||
|
"rotation": [0, 0, 0.45],
|
||||||
|
"length": 0.8,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0, -0.3, 0],
|
||||||
|
"rotation": [0, 0, 3],
|
||||||
|
"length": 0.5,
|
||||||
|
"color": "red"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.47, 0, 0],
|
||||||
|
"rotation": [0, 0, -0.85],
|
||||||
|
"length": 1.6,
|
||||||
|
"color": "red"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.47, -0.18, 0],
|
||||||
|
"rotation": [0, 0, -1.05],
|
||||||
|
"length": 1.6,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [-0.1, -0.5, 0],
|
||||||
|
"rotation": [0, 0, -0.2],
|
||||||
|
"length": 0.5,
|
||||||
|
"color": "red"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"5": [
|
||||||
|
{
|
||||||
|
"position": [0, 0, 0],
|
||||||
|
"rotation": [0, 0, -0.15],
|
||||||
|
"length": 0.9,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [-0.5, -0.1, 0],
|
||||||
|
"rotation": [0, 0, -0.65],
|
||||||
|
"length": 0.8,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.4, -0.25, 0],
|
||||||
|
"rotation": [0, 0, -1.15],
|
||||||
|
"length": 1,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.35, -0.6, 0],
|
||||||
|
"rotation": [0, 0, -1.95],
|
||||||
|
"length": 1,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.1, -0.7, 0],
|
||||||
|
"rotation": [0, 0, -2.35],
|
||||||
|
"length": 0.7,
|
||||||
|
"color": "yellow"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"6": [
|
||||||
|
{
|
||||||
|
"position": [-0.3, 0, 0],
|
||||||
|
"rotation": [0, 0, 0.4],
|
||||||
|
"length": 0.9,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [-0.15, 0, 0],
|
||||||
|
"rotation": [0, 0, 0.2],
|
||||||
|
"length": 0.9,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.15, -0.1, 0],
|
||||||
|
"rotation": [0, 0, -0.4],
|
||||||
|
"length": 0.9,
|
||||||
|
"color": "red"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.2, -0.1, 0],
|
||||||
|
"rotation": [0, 0, -0.5],
|
||||||
|
"length": 0.9,
|
||||||
|
"color": "yellow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"position": [0.35, -0.6, 0],
|
||||||
|
"rotation": [0, 0, -1.8],
|
||||||
|
"length": 0.9,
|
||||||
|
"color": "yellow"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
Loading…
Reference in a new issue