zone camera and target updation added

app/src/components/ui/componets/DroppedFloatingWidgets.tsx

@@ -1,59 +1,89 @@
-import { useState } from "react";
-import { useThree } from "@react-three/fiber";
-import * as THREE from "three";
+// import { useState } from "react";
+// import { useThree } from "@react-three/fiber";
+// import * as THREE from "three";
 
-const DroppedObjects = () => {
-  const { camera } = useThree(); // Now inside Canvas ✅
-  const [objects, setObjects] = useState<{ id: number; position: [number, number, number] }[]>([]);
 
-  // Function to convert drop event into 3D position
-  const handleDrop = (event: DragEvent) => {
-    event.preventDefault();
 
-    const data = event.dataTransfer?.getData("text/plain");
-    if (!data) return;
+// const DroppedObjects = () => {
+//   const { camera } = useThree(); // Now inside Canvas ✅
+//   const [objects, setObjects] = useState<{ id: number; position: [number, number, number] }[]>([]);
 
-    try {
-      const cardData = JSON.parse(data);
-      if (!cardData.className.includes("floating total-card")) {
-        console.log("Drop rejected: Incorrect element.");
-        return;
-      }
+//   // Function to convert drop event into 3D position
+//   const handleDrop = (event: DragEvent) => {
+//     event.preventDefault();
 
-      // Convert 2D drop position to 3D world coordinates
-      const x = (event.clientX / window.innerWidth) * 2 - 1;
-      const y = -(event.clientY / window.innerHeight) * 2 + 1;
+//     const data = event.dataTransfer?.getData("text/plain");
+//     if (!data) return;
 
-      // Raycasting to determine the drop position in 3D
-      const raycaster = new THREE.Raycaster();
-      const mouseVector = new THREE.Vector2(x, y);
-      raycaster.setFromCamera(mouseVector, camera);
+//     try {
+//       const cardData = JSON.parse(data);
+//       if (!cardData.className.includes("floating total-card")) {
+//         console.log("Drop rejected: Incorrect element.");
+//         return;
+//       }
 
-      // Intersect with a ground plane (assume y = 0)
-      const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
-      const intersection = new THREE.Vector3();
-      raycaster.ray.intersectPlane(groundPlane, intersection);
+//       // Convert 2D drop position to 3D world coordinates
+//       const x = (event.clientX / window.innerWidth) * 2 - 1;
+//       const y = -(event.clientY / window.innerHeight) * 2 + 1;
 
-      console.log("Spawn Object at:", intersection);
+//       // Raycasting to determine the drop position in 3D
+//       const raycaster = new THREE.Raycaster();
+//       const mouseVector = new THREE.Vector2(x, y);
+//       raycaster.setFromCamera(mouseVector, camera);
 
-      // Add the dropped object to the scene state
-      setObjects((prev) => [...prev, { id: Date.now(), position: [intersection.x, intersection.y, intersection.z] }]);
-    } catch (error) {
-      console.error("Invalid data:", error);
-    }
-  };
+//       // Intersect with a ground plane (assume y = 0)
+//       const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+//       const intersection = new THREE.Vector3();
+//       raycaster.ray.intersectPlane(groundPlane, intersection);
+
+//       console.log("Spawn Object at:", intersection);
+
+//       // Add the dropped object to the scene state
+//       setObjects((prev) => [...prev, { id: Date.now(), position: [intersection.x, intersection.y, intersection.z] }]);
+//     } catch (error) {
+//       console.error("Invalid data:", error);
+//     }
+//   };
+
+//   return (
+//     <group>
+//       {/* Render dropped objects as green boxes */}
+//       {objects.map((obj) => (
+//         <mesh key={obj.id} position={obj.position}>
+//           <boxGeometry args={[1, 1, 1]} />
+//           <meshStandardMaterial color="green" />
+//         </mesh>
+//       ))}
+//     </group>
+//   );
+// };
+
+import { Html } from "@react-three/drei";
+import { useDroppedObjectsStore } from "../../../store/store";
+
+
+const DroppedObjects: React.FC = () => {
+  const objects = useDroppedObjectsStore((state) => state.objects); // Get objects from Zustand store
+  console.log('objects: ', objects);
 
   return (
-    <group>
-      {/* Render dropped objects as green boxes */}
-      {objects.map((obj) => (
-        <mesh key={obj.id} position={obj.position}>
-          <boxGeometry args={[1, 1, 1]} />
-          <meshStandardMaterial color="green" />
-        </mesh>
+    <>
+      {objects.map((obj, index) => (
+        <group key={index} position={[Math.random() * 5, Math.random() * 5, 0]}>
+          <Html wrapperClass={obj.className}>
+            <div style={{ padding: "10px", background: "#fff", borderRadius: "6px" }}>
+              <div className="header">{obj.header}</div>
+              <div className="data-values">
+                <div className="value">{obj.value}</div>
+                <div className="per">{obj.per}</div>
+              </div>
+            </div>
+          </Html>
+        </group>
       ))}
-    </group>
+    </>
   );
 };
 
 export default DroppedObjects;
+