mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

explosion anim line poses mostly done, need some tweaking

Browse source
This commit is contained in:
ad044 2021-01-06 21:48:39 +04:00
parent af0df3e250
commit 715c924cde
3 changed files with 231 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/MainScene/SyncedComponents/Site/NodeExplosion.tsx
View file

@ -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;

8
src/components/MainScene/SyncedComponents/Site/NodeExplosion/ExplosionLine.tsx
View file

@ -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
View 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"
}
]
}