diff --git a/src/components/MainScene/SyncedComponentLoader.tsx b/src/components/MainScene/SyncedComponentLoader.tsx index 2e89271..d2c90fb 100644 --- a/src/components/MainScene/SyncedComponentLoader.tsx +++ b/src/components/MainScene/SyncedComponentLoader.tsx @@ -9,7 +9,7 @@ import Starfield from "./SyncedComponents/Starfield"; import Site from "./SyncedComponents/Site"; import MiddleRing from "./SyncedComponents/MiddleRing"; import { a } from "@react-spring/three"; -import NodeExplosion from "./SyncedComponents/Site/NodeExplosion"; +import NodeExplosion from "./SyncedComponents/Site/NodeAnimations/NodeExplosion"; type SyncedComponentLoaderProps = { paused: boolean; diff --git a/src/components/MainScene/SyncedComponents/Site/NodeExplosion.tsx b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion.tsx similarity index 89% rename from src/components/MainScene/SyncedComponents/Site/NodeExplosion.tsx rename to src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion.tsx index a7e9a04..fda3c1a 100644 --- a/src/components/MainScene/SyncedComponents/Site/NodeExplosion.tsx +++ b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion.tsx @@ -1,10 +1,10 @@ import React, { useEffect, useMemo, useRef, useState } from "react"; import ExplosionLine from "./NodeExplosion/ExplosionLine"; -import node_explosion_line_positions from "../../../../resources/node_explosion_line_positions.json"; +import node_explosion_line_positions from "../../../../../resources/node_explosion_line_positions.json"; import { useFrame } from "react-three-fiber"; import GoldNode from "./NodeExplosion/GoldNode"; -import { useNodeStore } from "../../../../store"; +import { useNodeStore } from "../../../../../store"; const NodeExplosion = () => { const explosionVisible = useNodeStore( @@ -39,9 +39,7 @@ const NodeExplosion = () => { useEffect(() => { if (explosionVisible) { - setTimeout(() => { - setShouldRotate(true); - }, 300); + setShouldRotate(true); setTimeout(() => { setShouldAnimate(true); }, 1100); diff --git a/src/components/MainScene/SyncedComponents/Site/NodeExplosion/ExplosionLine.tsx b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/ExplosionLine.tsx similarity index 97% rename from src/components/MainScene/SyncedComponents/Site/NodeExplosion/ExplosionLine.tsx rename to src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/ExplosionLine.tsx index 4cf78d7..49f2ae6 100644 --- a/src/components/MainScene/SyncedComponents/Site/NodeExplosion/ExplosionLine.tsx +++ b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/ExplosionLine.tsx @@ -44,7 +44,7 @@ const ExplosionLine = (props: LineProps) => { 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.7; + gl_FragColor = vec4(mix(color1, color2, colorMix), alpha) * 0.6; } `; @@ -53,7 +53,7 @@ const ExplosionLine = (props: LineProps) => { rotation={props.rotation as [number, number, number]} position={props.position as [number, number, number]} scale={[0.01, props.length, 0]} - renderOrder={-1} + renderOrder={2} > { useEffect(() => { if (r.current && !props.visible) { - r.current.rotation.y = -1.2; - r.current.rotation.z = 0; + r.current.rotation.x = Math.PI / 2; + r.current.rotation.y = 0; + r.current.rotation.z = Math.PI / 2 - 0.3; } }, [props.visible]); useFrame(() => { if (r.current && props.visible) { - r.current.rotation.y -= 0.01; - r.current.rotation.z += 0.01; + r.current.rotation.y -= 0.03; + r.current.rotation.z += 0.03; } }); return ( - { + return ( + <> + + + + + + ); +}; + +export default NodeRip; diff --git a/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip/TriangleNode.tsx b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip/TriangleNode.tsx new file mode 100644 index 0000000..5b8ab2b --- /dev/null +++ b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip/TriangleNode.tsx @@ -0,0 +1,37 @@ +import React, { useRef } from "react"; +import MULTI from "../../../../../../static/sprite/MULTI.png"; +import { useFrame, useLoader } from "react-three-fiber"; +import * as THREE from "three"; + +type TriangleNodeProps = { + rotation: number[]; + pivotRotation: number[]; +}; + +const TriangleNode = (props: TriangleNodeProps) => { + const tex = useLoader(THREE.TextureLoader, MULTI); + + const triangleNodeRef = useRef(); + + useFrame(() => { + if (triangleNodeRef.current) { + triangleNodeRef.current.position.z += 0.01; + } + }); + + return ( + + + + + + + ); +}; + +export default TriangleNode; diff --git a/src/core/StateManagers/MainSceneManagers/NodeManager.tsx b/src/core/StateManagers/MainSceneManagers/NodeManager.tsx index d250241..439d411 100644 --- a/src/core/StateManagers/MainSceneManagers/NodeManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/NodeManager.tsx @@ -102,10 +102,10 @@ const NodeManager = (props: StateManagerProps) => { setTimeout(() => { setActiveNodeState(true, "exploding"); + setActiveNodeState(false, "visible"); }, 1200); setTimeout(() => { - setActiveNodeState(false, "visible"); setActiveNodeState(false, "interactedWith"); setActiveNodeState(0, "rotZ"); setActiveNodeState(0, "rotX"); diff --git a/src/resources/node_explosion_line_positions.json b/src/resources/node_explosion_line_positions.json index 455596c..620f2d3 100644 --- a/src/resources/node_explosion_line_positions.json +++ b/src/resources/node_explosion_line_positions.json @@ -1,7 +1,7 @@ { "1": [ { - "position": [0, 0.2, 0], + "position": [0.1, 0.2, 0], "rotation": [0, 0, -0.25], "color": "red", "length": 1.5 @@ -13,7 +13,7 @@ "length": 1 }, { - "position": [-0.4, -0.6, 0], + "position": [-0.4, -0.8, 0], "rotation": [0, 0, -4], "color": "yellow", "length": 1 @@ -27,31 +27,31 @@ ], "2": [ { - "position": [0.4, -0.1, 0], + "position": [0.6, -0.1, 0], "rotation": [0, 0, -1], "length": 1.5, "color": "yellow" }, { - "position": [0.47, -0.18, 0], + "position": [0.65, -0.18, 0], "rotation": [0, 0, -1.1], "length": 1.6, "color": "red" }, { - "position": [0.45, -0.25, 0], + "position": [0.7, -0.2, 0], "rotation": [0, 0, -1.2], "length": 1.6, "color": "yellow" }, { - "position": [0, -0.75, 0], + "position": [0.1, -0.75, 0], "rotation": [0, 0, -2.5], "length": 0.8, "color": "red" }, { - "position": [-0.25, -0.75, 0], + "position": [-0.15, -0.8, 0], "rotation": [0, 0, -3.5], "length": 0.8, "color": "yellow" @@ -65,25 +65,25 @@ "color": "yellow" }, { - "position": [0.4, -0.1, 0], + "position": [0.5, -0.1, 0], "rotation": [0, 0, -0.95], "length": 1.5, "color": "red" }, { - "position": [0.47, -0.18, 0], + "position": [0.57, -0.08, 0], "rotation": [0, 0, -1.05], "length": 1.6, "color": "red" }, { - "position": [0.45, -0.25, 0], + "position": [0.55, -0.15, 0], "rotation": [0, 0, -1.15], "length": 1.5, "color": "red" }, { - "position": [0.5, -0.6, 0], + "position": [0.6, -0.6, 0], "rotation": [0, 0, -1.7], "length": 1.5, "color": "red" diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index bf4913e..a750fe9 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -9,7 +9,8 @@ import { useMainSceneStore } from "../store"; import Pause from "../components/MainScene/PauseSubscene/Pause"; import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader"; import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection"; -import NodeExplosion from "../components/MainScene/SyncedComponents/Site/NodeExplosion"; +import NodeExplosion from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion"; +import NodeRip from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip"; const MainScene = () => { const currentSubscene = useMainSceneStore((state) => state.subscene); @@ -38,6 +39,7 @@ const MainScene = () => { +