Enhance material handling: add support for additional materials in conveyor and machine mechanics, update action types, and implement material model loading.

app/src/modules/simulation/materials/instances/instance/materialInstance.tsx

@@ -1,10 +1,82 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import * as THREE from 'three';
-import MaterialAnimator from '../animator/materialAnimator'
+import MaterialAnimator from '../animator/materialAnimator';
+import { useProductStore } from '../../../../../store/simulation/useProductStore';
+import { useSelectedProduct } from '../../../../../store/simulation/useSimulationStore';
+import { MaterialModel } from '../material/materialModel';
+import { useThree } from '@react-three/fiber';
 
 function MaterialInstance({ material }: { material: MaterialSchema }) {
-    const [position, setPosition] = useState<THREE.Vector3>();
-    const [rotation, setRotation] = useState<THREE.Vector3>();
+    const matRef: any = useRef();
+    const { scene } = useThree();
+    const { getModelUuidByPointUuid, getPointByUuid, getEventByModelUuid } = useProductStore();
+    const { selectedProduct } = useSelectedProduct();
+
+    const getWorldPositionFromScene = (pointUuid: string): THREE.Vector3 | null => {
+        const pointObj = scene.getObjectByProperty("uuid", pointUuid);
+        if (!pointObj) return null;
+
+        const worldPosition = new THREE.Vector3();
+        pointObj.getWorldPosition(worldPosition);
+        return worldPosition;
+    };
+
+    const { position, rotation, speed } = useMemo(() => {
+        if (!material.current?.pointUuid) {
+            return { position: new THREE.Vector3(0, 0, 0), rotation: new THREE.Vector3(0, 0, 0), speed: 1 };
+        }
+
+        const modelUuid = getModelUuidByPointUuid(selectedProduct.productId, material.current.pointUuid);
+        if (!modelUuid) {
+            return { position: new THREE.Vector3(0, 0, 0), rotation: new THREE.Vector3(0, 0, 0), speed: 1 };
+        }
+
+        const speed = getCurrentSpeed(selectedProduct.productId, modelUuid);
+
+        const point = getPointByUuid(selectedProduct.productId, modelUuid, material.current.pointUuid);
+        if (!point) {
+            return { position: new THREE.Vector3(0, 0, 0), rotation: new THREE.Vector3(0, 0, 0), speed: 1 };
+        }
+
+        const position = getWorldPositionFromScene(point.uuid);
+        if (position) {
+            return { position: position, rotation: new THREE.Vector3(0, 0, 0), speed: 1 };
+        }
+
+        return {
+            position: new THREE.Vector3(...point.position),
+            rotation: new THREE.Vector3(...point.rotation),
+            speed: speed || 1
+        };
+    }, [material, getPointByUuid]);
+
+    function getCurrentSpeed(productId: string, modelUuid: string) {
+        const event = getEventByModelUuid(productId, modelUuid)
+        if (event) {
+            if (event.type === 'transfer') {
+                return event.speed;
+            }
+
+            if (event.type === 'vehicle') {
+                return event.speed;
+            }
+
+            if (event.type === 'machine') {
+                return 1;
+            }
+
+            if (event.type === 'roboticArm') {
+                return event.speed;
+            }
+
+            if (event.type === 'storageUnit') {
+                return 1;
+            }
+
+        } else {
+            return 1;
+        }
+    }
 
     useEffect(() => {
         // console.log('material: ', material);
@@ -13,8 +85,14 @@ function MaterialInstance({ material }: { material: MaterialSchema }) {
     return (
         <>
 
-            <MaterialAnimator />
+            <MaterialModel matRef={matRef} materialType={material.materialType} position={position} />
 
+            <MaterialAnimator
+                matRef={matRef}
+                material={material}
+                speed={speed}
+                onAnimationComplete={() => { console.log('123');}}
+            />
         </>
     )
 }