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 = () => {
+