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

@@ -11,6 +11,7 @@ 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 = () => {
@@ -19,10 +20,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<[number, number, number][]>(
+  const [positions, setPositions] = React.useState<Vector3[]>(
     []
   );
-  const [rotations, setRotations] = React.useState<[number, number, number][]>(
+  const [rotations, setRotations] = React.useState<Vector3[]>(
     []
   );
   const [count, setCount] = React.useState<string[]>([]);

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

@@ -1,12 +1,14 @@
 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";
+
 interface MultiGLTFInstancesProps {
   index: number;
   modelUrl: string;
-  position: [number, number, number];
+  position: Vector3;
-  rotation: [number, number, number];
+  rotation: Vector3;
   visibility?: boolean;
 }
 
@@ -25,8 +27,7 @@ export const MultiGLTFInstances: React.FC<MultiGLTFInstancesProps> = ({
     );
     loader.setDRACOLoader(draco);
   });
-  const cloned = originalGltf.scene.clone();
+  const cloned = clone(originalGltf.scene);
-  console.log(index);
   return (
     <>
       {visibility && (

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

@@ -1,19 +1,19 @@
-import { Object3D } from "three";
+import { Object3D, Vector3 } from "three";
 
 // Function to find objects named 'link_0' and update positions, rotations, and count
 export const findLinkObjects = (
   scene: Object3D,
   setPositions: React.Dispatch<
-    React.SetStateAction<[number, number, number][]>
+    React.SetStateAction<Vector3[]>
   >,
   setRotations: React.Dispatch<
-    React.SetStateAction<[number, number, number][]>
+    React.SetStateAction<Vector3[]>
   >,
   setCount: React.Dispatch<React.SetStateAction<string[]>>,
   visibility: boolean
 ) => {
-  const positions: [number, number, number][] = [];
+  const positions: Vector3[] = [];
-  const rotations: [number, number, number][] = [];
+  const rotations: Vector3[] = [];
   const count: string[] = [];
   let i = 0;
 
@@ -28,10 +28,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([px, py, pz]);
+        positions.push(new Vector3(px, py, pz));
 
         const { x: rx, y: ry, z: rz } = object.parent.rotation;
-        rotations.push([rx, ry, rz]);
+        rotations.push(new Vector3(rx, ry, rz));
 
         // Change visibility of the object
         object.visible = visibility;