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 { a } from "@react-spring/three";
|
||||
import * as THREE from "three";
|
||||
import React, { useMemo, useRef, useState } from "react";
|
||||
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 = () => {
|
||||
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;
|
||||
|
|
|
@ -4,6 +4,7 @@ import { a } from "@react-spring/three";
|
|||
|
||||
type LineProps = {
|
||||
rotation: number[];
|
||||
position: number[];
|
||||
color: string;
|
||||
length: number;
|
||||
};
|
||||
|
@ -15,7 +16,9 @@ const ExplosionLine = (props: LineProps) => {
|
|||
value: new THREE.Color("white"),
|
||||
},
|
||||
color2: {
|
||||
value: new THREE.Color(props.color),
|
||||
value: new THREE.Color(
|
||||
props.color === "yellow" ? "#f5cc16" : "#e33d00"
|
||||
),
|
||||
},
|
||||
}),
|
||||
[props.color]
|
||||
|
@ -38,7 +41,7 @@ const ExplosionLine = (props: LineProps) => {
|
|||
varying vec2 vUv;
|
||||
|
||||
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);
|
||||
|
||||
gl_FragColor = vec4(mix(color1, color2, colorMix), alpha) * 0.8;
|
||||
|
@ -48,6 +51,7 @@ const ExplosionLine = (props: LineProps) => {
|
|||
return (
|
||||
<mesh
|
||||
rotation={props.rotation as [number, number, number]}
|
||||
position={props.position as [number, number, number]}
|
||||
scale={[0.01, props.length, 0]}
|
||||
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