diff --git a/src/components/MainScene/SyncedComponents/Site/NodeExplosion.tsx b/src/components/MainScene/SyncedComponents/Site/NodeExplosion.tsx
index 306f9ca..d236751 100644
--- a/src/components/MainScene/SyncedComponents/Site/NodeExplosion.tsx
+++ b/src/components/MainScene/SyncedComponents/Site/NodeExplosion.tsx
@@ -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 ;
+ 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 (
+
+ {Object.values(linePoses).map((entry) => (
+
+ ))}
+
+ );
};
export default NodeExplosion;
diff --git a/src/components/MainScene/SyncedComponents/Site/NodeExplosion/ExplosionLine.tsx b/src/components/MainScene/SyncedComponents/Site/NodeExplosion/ExplosionLine.tsx
index c22362f..8ea6761 100644
--- a/src/components/MainScene/SyncedComponents/Site/NodeExplosion/ExplosionLine.tsx
+++ b/src/components/MainScene/SyncedComponents/Site/NodeExplosion/ExplosionLine.tsx
@@ -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 (
diff --git a/src/resources/node_explosion_line_positions.json b/src/resources/node_explosion_line_positions.json
new file mode 100644
index 0000000..8660bab
--- /dev/null
+++ b/src/resources/node_explosion_line_positions.json
@@ -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"
+ }
+ ]
+}