refactor: Remove Html wrapper and integrate AssetDetailsCard into new RoboticArmContentUi and VehicleContentUi components

2025-05-08 19:08:57 +05:30
parent 1c0b09acb1
commit 7bc7a49b42
4 changed files with 90 additions and 49 deletions
--- a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx
+++ b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx
@@ -0,0 +1,34 @@
+import { Html } from "@react-three/drei";
+import React from "react";
+import AssetDetailsCard from "../../../components/ui/simulation/AssetDetailsCard";
+import { Vector3 } from "three";
+
+type VehicleContentUiProps = {
+  roboticArm: ArmBotStatus;
+};
+
+const RoboticArmContentUi: React.FC<VehicleContentUiProps> = ({ roboticArm }) => {
+  return (
+    <Html
+      // data
+      position={
+        new Vector3(
+          roboticArm.position[0],
+          roboticArm.point.position[1],
+          roboticArm.position[2]
+        )
+      }
+      // class none
+      // other
+      zIndexRange={[1, 0]}
+      prepend
+      sprite
+      center
+      distanceFactor={20}
+    >
+      <AssetDetailsCard name={roboticArm.modelName} status={roboticArm.state} />
+    </Html>
+  );
+};
+
+export default RoboticArmContentUi;