adding node rip animatioNn

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;

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

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}
     >
       <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
       <a.shaderMaterial

src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx

@@ -2,28 +2,28 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import * as THREE from "three";
 import { useFrame, useLoader } from "react-three-fiber";
-import Cou from "../../../../../static/sprite/Cou.png";
-import CouGold from "../../../../../static/sprite/Cou_gold.png";
-import Dc from "../../../../../static/sprite/Dc.png";
-import DcGold from "../../../../../static/sprite/Dc_gold.png";
-import SSkn from "../../../../../static/sprite/SSkn.png";
-import SSKnGold from "../../../../../static/sprite/SSkn_gold.png";
-import Tda from "../../../../../static/sprite/Tda.png";
-import TdaGold from "../../../../../static/sprite/Tda_gold.png";
-import Dia from "../../../../../static/sprite/Dia.png";
-import DiaGold from "../../../../../static/sprite/Dia_gold.png";
-import Lda from "../../../../../static/sprite/Lda.png";
-import LdaGold from "../../../../../static/sprite/Lda_gold.png";
-import MULTI from "../../../../../static/sprite/MULTI.png";
-import MULTIGold from "../../../../../static/sprite/MULTI_gold.png";
+import Cou from "../../../../../../static/sprite/Cou.png";
+import CouGold from "../../../../../../static/sprite/Cou_gold.png";
+import Dc from "../../../../../../static/sprite/Dc.png";
+import DcGold from "../../../../../../static/sprite/Dc_gold.png";
+import SSkn from "../../../../../../static/sprite/SSkn.png";
+import SSKnGold from "../../../../../../static/sprite/SSkn_gold.png";
+import Tda from "../../../../../../static/sprite/Tda.png";
+import TdaGold from "../../../../../../static/sprite/Tda_gold.png";
+import Dia from "../../../../../../static/sprite/Dia.png";
+import DiaGold from "../../../../../../static/sprite/Dia_gold.png";
+import Lda from "../../../../../../static/sprite/Lda.png";
+import LdaGold from "../../../../../../static/sprite/Lda_gold.png";
+import MULTI from "../../../../../../static/sprite/MULTI.png";
+import MULTIGold from "../../../../../../static/sprite/MULTI_gold.png";
 import {
   useLevelStore,
   useNodeStore,
   useSiteStore,
-} from "../../../../../store";
-import site_a from "../../../../../resources/site_a.json";
-import site_b from "../../../../../resources/site_b.json";
-import { SiteType } from "../../Site";
+} from "../../../../../../store";
+import site_a from "../../../../../../resources/site_a.json";
+import site_b from "../../../../../../resources/site_b.json";
+import { SiteType } from "../../../Site";
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -88,27 +88,27 @@ const GoldNode = (props: GoldNodeProps) => {
 
   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 (
     <mesh
-      // geometry={nodes.Cube.geometry}
-      position={[-0.18, -0.45, 0]}
-      rotation={[0, -1.2, 0]}
-      scale={[0.24, 0.19, 0.34]}
+      geometry={nodes.Cube.geometry}
+      position={[-0.155, -0.45, 0]}
+      rotation={[Math.PI / 2, 0, Math.PI / 2 - 0.3]}
+      scale={[-0.1 / 1.15, 0.2 / 1.35, 0.1 / 1.15]}
       ref={r}
     >
-      <boxBufferGeometry attach="geometry" />
       <meshBasicMaterial
         attach="material"
         map={props.goldTexture ? goldTex : regularTex}

src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import TriangleNode from "./NodeRip/TriangleNode";
+
+const NodeRip = () => {
+  return (
+    <>
+      <TriangleNode
+        rotation={[1.3, 1.6, 0]}
+        pivotRotation={[0, -Math.PI / 4 - 0.5, 0]}
+      />
+      <TriangleNode
+        rotation={[0.4, 0.3, 0]}
+        pivotRotation={[0, -Math.PI / 8, 0]}
+      />
+      <TriangleNode
+        rotation={[1.6, 2.6, 0]}
+        pivotRotation={[0, Math.PI / 4 + 0.5, 0]}
+      />
+      <TriangleNode
+        rotation={[-0.7, 1.8, 0]}
+        pivotRotation={[0, Math.PI / 8, 0]}
+      />
+    </>
+  );
+};
+
+export default NodeRip;

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<THREE.Object3D>();
+
+  useFrame(() => {
+    if (triangleNodeRef.current) {
+      triangleNodeRef.current.position.z += 0.01;
+    }
+  });
+
+  return (
+    <group rotation={props.pivotRotation as [number, number, number]}>
+      <mesh
+        position={[-0.1, -0.2, 0.1]}
+        rotation={props.rotation as [number, number, number]}
+        scale={[0.1, 0.1, 0.1]}
+        ref={triangleNodeRef}
+      >
+        <coneBufferGeometry attach="geometry" args={[1, 2, 3]} />
+        <meshBasicMaterial attach="material" map={tex} transparent={true} />
+      </mesh>
+    </group>
+  );
+};
+
+export default TriangleNode;

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");

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"

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 = () => {
           <pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
           <pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
           <NodeExplosion />
+          <NodeRip />
         </a.group>
         <Lain shouldIntro={shouldIntro} />
       </Suspense>