diff --git a/app/src/modules/builder/asset/assetsGroup.tsx b/app/src/modules/builder/asset/assetsGroup.tsx index deda3d8..89f7471 100644 --- a/app/src/modules/builder/asset/assetsGroup.tsx +++ b/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(); diff --git a/app/src/modules/builder/asset/models/model/model.tsx b/app/src/modules/builder/asset/models/model/model.tsx index 92f6d73..384c564 100644 --- a/app/src/modules/builder/asset/models/model/model.tsx +++ b/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') { diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx index 66858a4..5ab6b75 100644 --- a/app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx +++ b/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); } diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx index 26ebe57..18f4abf 100644 --- a/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx +++ b/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); diff --git a/app/src/services/factoryBuilder/webWorkers/distanceWorker.js b/app/src/services/factoryBuilder/webWorkers/distanceWorker.js new file mode 100644 index 0000000..f17ff76 --- /dev/null +++ b/app/src/services/factoryBuilder/webWorkers/distanceWorker.js @@ -0,0 +1,21 @@ +onmessage = function (e) { + const { assetPosition, cameraPosition, limitDistance, renderDistance, isRendered } = e.data; + + if (limitDistance && assetPosition) { + const distance = Math.sqrt( + Math.pow(assetPosition.x - cameraPosition.x, 2) + + Math.pow(assetPosition.y - cameraPosition.y, 2) + + Math.pow(assetPosition.z - cameraPosition.z, 2) + ); + + if (!isRendered && distance <= renderDistance) { + postMessage({ shouldRender: true }); + } else if (isRendered && distance > renderDistance) { + postMessage({ shouldRender: false }); + } + } else { + if (!isRendered) { + postMessage({ shouldRender: true }); + } + } +}; \ No newline at end of file diff --git a/app/src/services/factoryBuilder/webWorkers/gltfLoaderWorker.js b/app/src/services/factoryBuilder/webWorkers/gltfLoaderWorker.js index 66c9c81..e6d38ad 100644 --- a/app/src/services/factoryBuilder/webWorkers/gltfLoaderWorker.js +++ b/app/src/services/factoryBuilder/webWorkers/gltfLoaderWorker.js @@ -1,12 +1,5 @@ -import * as THREE from 'three'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; -import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; import { retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils'; -const loader = new GLTFLoader(); -const dracoLoader = new DRACOLoader(); -dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/'); -loader.setDRACOLoader(dracoLoader); let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; onmessage = async (event) => { @@ -17,8 +10,8 @@ onmessage = async (event) => { ); for (const item of uniqueItems) { - if(item.assetId === null || item.assetId === undefined) { - continue; // Skip items without a valid assetId + if (item.assetId === null || item.assetId === undefined) { + continue; } const modelID = item.assetId; const indexedDBModel = await retrieveGLTF(modelID); @@ -37,5 +30,5 @@ onmessage = async (event) => { } } - postMessage({ message: 'done' }) + postMessage({ message: 'done' }); };