From 715c924cdef835c7b42f5e03c2aa7e141310ceaf Mon Sep 17 00:00:00 2001 From: ad044 Date: Wed, 6 Jan 2021 21:48:39 +0400 Subject: [PATCH] explosion anim line poses mostly done, need some tweaking --- .../SyncedComponents/Site/NodeExplosion.tsx | 41 +++- .../Site/NodeExplosion/ExplosionLine.tsx | 8 +- .../node_explosion_line_positions.json | 188 ++++++++++++++++++ 3 files changed, 231 insertions(+), 6 deletions(-) create mode 100644 src/resources/node_explosion_line_positions.json 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" + } + ] +}