refactor: standardize position and rotation types to use tuple arrays for consistency

app/src/modules/simulation/ik/ArmReplace.tsx

@@ -11,7 +11,6 @@ import { MultiGLTFInstances } from "./MultiGLTFInstances";
 
 // impory model from model folder
 import armModel from "../../../assets/gltf-glb/rigged/ik_arm_4.glb";
-import { Vector3 } from "three";
 
 // Main component to include the logic
 const ArmReplace: React.FC = () => {
@@ -20,10 +19,10 @@ const ArmReplace: React.FC = () => {
   const { scene } = useThree(); // Access the Three.js scene from the React Fiber context
 
   // State to store positions, rotations, and count
-  const [positions, setPositions] = React.useState<Vector3[]>(
+  const [positions, setPositions] = React.useState<[number, number, number][]>(
     []
   );
-  const [rotations, setRotations] = React.useState<Vector3[]>(
+  const [rotations, setRotations] = React.useState<[number, number, number][]>(
     []
   );
   const [count, setCount] = React.useState<string[]>([]);
@@ -41,15 +40,15 @@ const ArmReplace: React.FC = () => {
 
   return (
     <>
-      {count.map((_, i: number) => (
-        <MultiGLTFInstances
-          index={i}
-          modelUrl={armModel}
-          position={positions[i]}
-          rotation={rotations[i]}
-          visibility={activeModule === "simulation" ? true : false}
-        />
-      ))}
+      {useModuleStore.getState().activeModule === "simulation" &&
+        count.map((_, i: number) => (
+          <MultiGLTFInstances
+            index={i}
+            modelUrl={armModel}
+            position={positions[i]}
+            rotation={rotations[i]}
+          />
+        ))}
     </>
   );
 };

app/src/modules/simulation/ik/MultiGLTFInstances.tsx

@@ -1,5 +1,4 @@
 import { useLoader } from "@react-three/fiber";
-import { Vector3 } from "three";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { clone } from "three/examples/jsm/utils/SkeletonUtils";
@@ -7,9 +6,8 @@ import { clone } from "three/examples/jsm/utils/SkeletonUtils";
 interface MultiGLTFInstancesProps {
   index: number;
   modelUrl: string;
-  position: Vector3;
-  rotation: Vector3;
-  visibility?: boolean;
+  position: [number, number, number];
+  rotation: [number, number, number];
 }
 
 export const MultiGLTFInstances: React.FC<MultiGLTFInstancesProps> = ({
@@ -17,9 +15,8 @@ export const MultiGLTFInstances: React.FC<MultiGLTFInstancesProps> = ({
   modelUrl,
   position,
   rotation,
-  visibility,
 }) => {
-  console.log("position: ", position);
+  // Load GLTF model with DRACO loader for compression
   const originalGltf = useLoader(GLTFLoader, modelUrl, (loader) => {
     const draco = new DRACOLoader();
     draco.setDecoderPath(
@@ -27,19 +24,20 @@ export const MultiGLTFInstances: React.FC<MultiGLTFInstancesProps> = ({
     );
     loader.setDRACOLoader(draco);
   });
+
+  // Clone the model for independent transformations
   const cloned = clone(originalGltf.scene);
+
+  // Render the cloned model
   return (
-    <>
-      {visibility && (
-        <primitive
-          name={`rigged_arm`}
-          key={index}
-          object={cloned}
-          position={position}
-          scale={[1, 1, 1]}
-          rotation={rotation}
-        />
-      )}
-    </>
+    <mesh>
+      <primitive
+        name="rigged_arm"
+        key={index}
+        object={cloned}
+        position={position}
+        rotation={rotation}
+      />
+    </mesh>
   );
 };

app/src/modules/simulation/ik/functions/findLinkObjects.ts

@@ -4,22 +4,19 @@ import { Object3D, Vector3 } from "three";
 export const findLinkObjects = (
   scene: Object3D,
   setPositions: React.Dispatch<
-    React.SetStateAction<Vector3[]>
+    React.SetStateAction<[number, number, number][]>
   >,
   setRotations: React.Dispatch<
-    React.SetStateAction<Vector3[]>
+    React.SetStateAction<[number, number, number][]>
   >,
   setCount: React.Dispatch<React.SetStateAction<string[]>>,
   visibility: boolean
 ) => {
-  const positions: Vector3[] = [];
-  const rotations: Vector3[] = [];
+  const positions: [number, number, number][] = [];
+  const rotations: [number, number, number][] = [];
   const count: string[] = [];
   let i = 0;
 
-  let name = scene.getObjectByName("rigged_arm");
-  console.log(name);
-
   scene.traverse((object) => {
     if (object.name === "link_0") {
       if (object.parent && object.type !== "SkinnedMesh") {
@@ -28,10 +25,10 @@ export const findLinkObjects = (
         i++;
         // Save the position and rotation of the parent object
         const { x: px, y: py, z: pz } = object.parent.position;
-        positions.push(new Vector3(px, py, pz));
+        positions.push([px, py, pz]);
 
         const { x: rx, y: ry, z: rz } = object.parent.rotation;
-        rotations.push(new Vector3(rx, ry, rz));
+        rotations.push([rx, ry, rz]);
 
         // Change visibility of the object
         object.visible = visibility;