Add user ID to selected user state and update related components

app/src/components/layout/sidebarRight/Header.tsx

@@ -42,6 +42,7 @@ const Header: React.FC = () => {
     setSelectedUser({
       color: getAvatarColor(index, user.userName),
       name: user.userName,
+      id: user.id,
       location: { position, rotation, target },
     });
     setCamMode("FollowPerson");

app/src/modules/collaboration/camera/collabCams.tsx

@@ -20,7 +20,7 @@ const CamModelsGroup = () => {
   const { setActiveUsers } = useActiveUsers();
   const { socket } = useSocketStore();
   const { activeModule } = useModuleStore();
-  const { selectedUser } = useSelectedUserStore();
+  const { selectedUser, setSelectedUser } = useSelectedUserStore();
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const loader = new GLTFLoader();
@@ -126,6 +126,18 @@ const CamModelsGroup = () => {
       )
         return;
 
+      if (selectedUser && selectedUser?.id === data.data.userId) {
+        setSelectedUser({
+          color: selectedUser.color,
+          name: selectedUser.name,
+          id: selectedUser.id,
+          location: {
+            position: data.data.position,
+            rotation: data.data.rotation,
+            target: data.data.target,
+          },
+        });
+      }
       setModels((prev) => ({
         ...prev,
         [data.data.userId]: {
@@ -221,6 +233,28 @@ const CamModelsGroup = () => {
     });
   }, []);
 
+  // collide validate
+  const collisionThreshold = 0.001;
+
+  const collidedCamUUIDs = new Set<string>();
+
+  for (let i = 0; i < cams.length; i++) {
+    for (let j = i + 1; j < cams.length; j++) {
+      const posA = cams[i].position;
+      const posB = cams[j].position;
+
+      const distSquared =
+        Math.pow(posA.x - posB.x, 2) +
+        Math.pow(posA.y - posB.y, 2) +
+        Math.pow(posA.z - posB.z, 2);
+
+      if (distSquared < collisionThreshold ** 2) {
+        collidedCamUUIDs.add(cams[i].uuid);
+        collidedCamUUIDs.add(cams[j].uuid);
+      }
+    }
+  }
+
   return (
     <group ref={groupRef} name="Cam-Model-Group">
       {cams.map((cam, index) => (
@@ -249,6 +283,7 @@ const CamModelsGroup = () => {
             <CollabUserIcon
               userImage={cam.userData.userImage ?? ""}
               userName={cam.userData.userName}
+              id={cam.userData._id}
               color={getAvatarColor(index, cam.userData.userName)}
               position={cam.position}
               rotation={cam.rotation}

app/src/modules/collaboration/camera/collabUserIcon.tsx

@@ -7,6 +7,7 @@ interface CollabUserIconProps {
   userName: string;
   userImage?: string;
   color: string;
+  id: string,
   position?: {
     x: number;
     y: number;
@@ -27,6 +28,7 @@ interface CollabUserIconProps {
 const CollabUserIcon: React.FC<CollabUserIconProps> = ({
   userImage,
   userName,
+  id,
   color,
   position,
   rotation,
@@ -42,6 +44,7 @@ const CollabUserIcon: React.FC<CollabUserIconProps> = ({
           if (!position || !rotation || !target) return;
           // Set the selected user in the store
           setSelectedUser({
+            id: id,
             color: color,
             name: userName,
             location: { position, rotation, target },

app/src/store/useCollabStore.ts

@@ -3,6 +3,7 @@ import { create } from 'zustand';
 interface SelectedUser {
     color: string;
     name: string;
+    id: string,
     location?: {
         position: {
             x: number;