diff --git a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
index fb00e5a..f3ec98e 100644
--- a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
@@ -1,8 +1,6 @@
import RoboticArmInstance from "./armInstance/roboticArmInstance";
import { useArmBotStore } from "../../../../store/simulation/useArmBotStore";
-import { Html } from "@react-three/drei";
-import AssetDetailsCard from "../../../../components/ui/simulation/AssetDetailsCard";
-import { Vector3 } from "three";
+import RoboticArmContentUi from "../../ui3d/RoboticArmContentUi";
function RoboticArmInstances() {
const { armBots } = useArmBotStore();
@@ -12,25 +10,7 @@ function RoboticArmInstances() {
{armBots?.map((robot: ArmBotStatus) => (
<>
-
-
-
+
))}
diff --git a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx
new file mode 100644
index 0000000..c85e387
--- /dev/null
+++ 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 = ({ roboticArm }) => {
+ return (
+
+
+
+ );
+};
+
+export default RoboticArmContentUi;
diff --git a/app/src/modules/simulation/ui3d/VehicleContentUi.tsx b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx
new file mode 100644
index 0000000..0173081
--- /dev/null
+++ b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx
@@ -0,0 +1,52 @@
+import { Html } from "@react-three/drei";
+import { Object3D, Vector3 } from "three";
+import AssetDetailsCard from "../../../components/ui/simulation/AssetDetailsCard";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useState } from "react";
+
+type VehicleContentUiProps = {
+ vehicle: VehicleStatus;
+};
+
+const VehicleContentUi: React.FC = ({ vehicle }) => {
+ const { scene } = useThree();
+ const [htmlPosition, setHtmlPosition] = useState<[number, number, number]>([
+ 0, 0, 0,
+ ]);
+ const offset = new Vector3(0, 0.85, 0);
+ useFrame(() => {
+ const agvModel = scene.getObjectByProperty(
+ "uuid",
+ vehicle.modelUuid
+ ) as Object3D;
+ if (agvModel) {
+ const worldPosition = offset.clone().applyMatrix4(agvModel.matrixWorld);
+ setHtmlPosition([worldPosition.x, worldPosition.y, worldPosition.z]);
+ }
+ });
+
+ return (
+
+
+
+ );
+};
+
+export default VehicleContentUi;
diff --git a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
index 8660f90..0ea7227 100644
--- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
+++ b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
@@ -1,9 +1,7 @@
import React from "react";
import VehicleInstance from "./instance/vehicleInstance";
import { useVehicleStore } from "../../../../store/simulation/useVehicleStore";
-import { Html } from "@react-three/drei";
-import { Vector3 } from "three";
-import AssetDetailsCard from "../../../../components/ui/simulation/AssetDetailsCard";
+import VehicleContentUi from "../../ui3d/VehicleContentUi";
function VehicleInstances() {
const { vehicles } = useVehicleStore();
@@ -13,30 +11,7 @@ function VehicleInstances() {
{vehicles.map((vehicle: VehicleStatus) => (
<>
-
-
-
+
))}