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

app/src/modules/builder/asset/assetsGroup.tsx

@@ -16,12 +16,7 @@ import { getUserData } from "../../../functions/getUserData";
 import { useSceneContext } from "../../scene/sceneContext";
 import { useVersionContext } from "../version/versionContext";
 
-const gltfLoaderWorker = new Worker(
-    new URL(
-        "../../../services/factoryBuilder/webWorkers/gltfLoaderWorker.js",
-        import.meta.url
-    )
-);
+const gltfLoaderWorker = new Worker(new URL("../../../services/factoryBuilder/webWorkers/gltfLoaderWorker.js", import.meta.url));
 
 function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
     const { activeModule } = useModuleStore();

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') {

app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx

@@ -42,8 +42,8 @@ const DuplicationControls3D = ({
         right: false,
     });
 
-    const calculateDragOffset = useCallback((point: THREE.Vector3, hitPoint: THREE.Vector3) => {
-        const pointPosition = new THREE.Vector3().copy(point);
+    const calculateDragOffset = useCallback((point: THREE.Object3D, hitPoint: THREE.Vector3) => {
+        const pointPosition = new THREE.Vector3().copy(point.position);
         return new THREE.Vector3().subVectors(pointPosition, hitPoint);
     }, []);
 
@@ -120,11 +120,9 @@ const DuplicationControls3D = ({
 
         if (hit) {
             if (mouseButtonsDown.current.left || mouseButtonsDown.current.right) {
-                const assetUuid = duplicatedObjects[0].userData.modelUuid;
-                const asset = getAssetById(assetUuid);
-                if (!asset) return;
-                if (duplicatedObjects[0]) {
-                    const newOffset = calculateDragOffset(new THREE.Vector3(...asset.position), intersectionPoint);
+                const model = scene.getObjectByProperty("uuid", duplicatedObjects[0].userData.modelUuid);
+                if (model) {
+                    const newOffset = calculateDragOffset(model, intersectionPoint);
                     setDragOffset(newOffset);
                 }
                 return;
@@ -177,7 +175,7 @@ const DuplicationControls3D = ({
             const hit = raycaster.ray.intersectPlane(plane, intersectionPoint);
 
             if (hit) {
-                const offset = calculateDragOffset(selectedAssets[0].position, hit);
+                const offset = calculateDragOffset(selectedAssets[0], hit);
                 setDragOffset(offset);
             }
 

app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx

@@ -210,7 +210,7 @@ function MoveControls3D({
                 const initialBasePosition = initialPositions[movedObjects[0].uuid];
                 const positionDifference = new THREE.Vector3().subVectors(rawBasePosition, initialBasePosition);
 
-                const adjustedDifference = positionDifference.multiplyScalar(moveDistance);
+                let adjustedDifference = positionDifference.multiplyScalar(moveDistance);
 
                 const baseNewPosition = new THREE.Vector3().addVectors(initialBasePosition, adjustedDifference);