Refactor asset loading and distance calculation logic for improved performance and clarity

app/src/modules/builder/asset/models/model/model.tsx

@@ -17,13 +17,16 @@ import { useSceneContext } from '../../../../scene/sceneContext';
 import { useVersionContext } from '../../../version/versionContext';
 import { SkeletonUtils } from 'three-stdlib';
 import { useAnimationPlaySpeed, usePauseButtonStore } from '../../../../../store/usePlayButtonStore';
+
 import { upsertProductOrEventApi } from '../../../../../services/simulation/products/UpsertProductOrEventApi';
 import { getAssetIksApi } from '../../../../../services/simulation/ik/getAssetIKs';
 
+const distanceWorker = new Worker(new URL("../../../../../services/factoryBuilder/webWorkers/distanceWorker.js", import.meta.url));
+
 function Model({ asset }: { readonly asset: Asset }) {
     const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
     const savedTheme: string = localStorage.getItem("theme") || "light";
-    const { camera, controls, gl } = useThree();
+    const { camera, controls, gl, scene } = useThree();
     const { activeTool } = useActiveTool();
     const { toolMode } = useToolMode();
     const { toggleView } = useToggleView();
@@ -116,6 +119,12 @@ function Model({ asset }: { readonly asset: Asset }) {
         }
     }, [isRendered, selectedFloorItem])
 
+    useEffect(() => {
+        distanceWorker.onmessage = (e) => {
+            setIsRendered(e.data.shouldRender);
+        };
+    }, []);
+
     useEffect(() => {
         const loader = new GLTFLoader();
         const dracoLoader = new DRACOLoader();
@@ -202,21 +211,6 @@ function Model({ asset }: { readonly asset: Asset }) {
 
     }, []);
 
-    useFrame(() => {
-        const assetPosition = new THREE.Vector3(...asset.position);
-        if (limitDistance) {
-            if (!isRendered && assetPosition.distanceTo(camera.position) <= renderDistance) {
-                setIsRendered(true);
-            } else if (isRendered && assetPosition.distanceTo(camera.position) > renderDistance) {
-                setIsRendered(false);
-            }
-        } else {
-            if (!isRendered) {
-                setIsRendered(true);
-            }
-        }
-    })
-
     const handleDblClick = (asset: Asset) => {
         if (asset) {
             if (activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {