"updated smooth animation"

app/src/modules/simulation/path/pathCreation.tsx

@@ -14,12 +14,14 @@ import {
 } from "../../../store/store";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSubModuleStore } from "../../../store/useModuleStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 
 function PathCreation({
   pathsGroupRef,
 }: {
   pathsGroupRef: React.MutableRefObject<THREE.Group>;
 }) {
+  const { isPlaying } = usePlayButtonStore();
   const { renderDistance } = useRenderDistance();
   const { setSubModule } = useSubModuleStore();
   const { setSelectedActionSphere, selectedActionSphere } =
@@ -66,7 +68,7 @@ function PathCreation({
         const distance = new THREE.Vector3(
           ...group.position.toArray()
         ).distanceTo(camera.position);
-        group.visible = distance <= renderDistance;
+        group.visible = ((distance <= renderDistance) && !isPlaying);
       }
     });
   });
@@ -193,7 +195,7 @@ function PathCreation({
   };
 
   return (
-    <group name="simulation-simulationPaths-group" ref={pathsGroupRef}>
+    <group visible={!isPlaying} name="simulation-simulationPaths-group" ref={pathsGroupRef}>
       {simulationPaths.map((path) => {
         if (path.type === "Conveyor") {
           const points = path.points.map(

app/src/modules/simulation/process/mesh.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Mesh: React.FC = () => {
+  return <mesh></mesh>;
+};
+
+export default Mesh;

app/src/modules/simulation/simulation.tsx

@@ -19,7 +19,7 @@ function Simulation() {
   const [processes, setProcesses] = useState([]);
 
   useEffect(() => {
-    // console.log('simulationPaths: ', simulationPaths);
+    console.log('simulationPaths: ', simulationPaths);
   }, [simulationPaths]);
 
   // useEffect(() => {