add initial components and utility functions for simulation and builder modules

2025-03-25 14:00:03 +05:30
parent 61b3c4ee2c
commit 2303682a15
164 changed files with 13967 additions and 52 deletions
--- a/app/src/modules/scene/mqttTemp/drieHtmlTemp.tsx
+++ b/app/src/modules/scene/mqttTemp/drieHtmlTemp.tsx
@@ -0,0 +1,109 @@
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+import * as Types from "../../../types/world/worldTypes";
+import { useDrieTemp, useDrieUIValue } from "../../../store/store"
+import UI from "./ui";
+import { useEffect } from "react";
+import { useThree } from "@react-three/fiber";
+
+export default function DrieHtmlTemp({ itemsGroup }: { itemsGroup: Types.RefGroup }) {
+  const { drieTemp, setDrieTemp } = useDrieTemp();
+  const { drieUIValue, setDrieUIValue } = useDrieUIValue();
+  const state = useThree();
+  const { camera, raycaster } = state;
+
+  useEffect(() => {
+    const canvasElement = state.gl.domElement;
+    let drag = false;
+    let isLeftMouseDown = false;
+
+    const onMouseDown = (evt: any) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = true;
+        drag = false;
+      }
+    };
+
+    const onMouseMove = () => {
+      if (isLeftMouseDown) {
+        drag = true;
+      }
+    };
+
+    const onMouseUp = (evt: any) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = false;
+        if (drag) return;
+        if (!itemsGroup.current) return
+        let intersects = raycaster.intersectObjects(itemsGroup.current.children, true);
+        if (intersects.length > 0) {
+          let currentObject = intersects[0].object;
+
+          while (currentObject) {
+            if (currentObject.name === "Scene") {
+              break;
+            }
+            currentObject = currentObject.parent as THREE.Object3D;
+          }
+          if (currentObject && (currentObject.userData.name === "SV2 Controll pannel" || currentObject.userData.name === "forklift")) {
+            const worldPos = new THREE.Vector3();
+            currentObject.getWorldPosition(worldPos);
+
+            const rightOffset = new THREE.Vector3(1, 0, 0);
+            const upOffset = new THREE.Vector3(0, 1, 0);
+
+            currentObject.localToWorld(rightOffset);
+            currentObject.localToWorld(upOffset);
+
+            const finalPosition = worldPos.clone().addScaledVector(rightOffset.sub(currentObject.position).normalize(), 2.5).addScaledVector(upOffset.sub(currentObject.position).normalize(), 2.3);
+
+            setDrieTemp(finalPosition);
+          } else {
+            setDrieTemp(undefined);
+          }
+        }
+        else {
+          setDrieTemp(undefined);
+        }
+      }
+    };
+
+
+    canvasElement.addEventListener("mousedown", onMouseDown);
+    canvasElement.addEventListener("mouseup", onMouseUp);
+    canvasElement.addEventListener("mousemove", onMouseMove);
+
+    return () => {
+      canvasElement.removeEventListener("mousedown", onMouseDown);
+      canvasElement.removeEventListener("mouseup", onMouseUp);
+      canvasElement.removeEventListener("mousemove", onMouseMove);
+    };
+  }, [])
+
+  return (
+    <>
+      {drieTemp &&
+        <mesh position={[drieTemp.x, drieTemp.y, drieTemp.z]}>
+          <Html
+            as="div"
+            center
+            zIndexRange={[1, 0]}
+            transform
+            sprite
+            style={{
+              padding: "10px",
+              color: "white",
+              borderRadius: "8px",
+              textAlign: "center",
+              fontFamily: "Arial, sans-serif",
+            }}
+            scale={[0.3, 0.3, 0.3]}
+          // occlude
+          >
+            <UI temperature={drieUIValue.temperature} humidity={drieUIValue.humidity} touch={drieUIValue.touch} header={""} />
+          </Html>
+        </mesh>
+      }
+    </>
+  )
+}