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

This commit is contained in:
2025-07-28 15:00:24 +05:30
parent 2ac6bbeb9d
commit 11ace1977a
6 changed files with 42 additions and 41 deletions

View File

@@ -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();

View File

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

View File

@@ -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);
}

View File

@@ -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);

View File

@@ -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 });
}
}
};

View File

@@ -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' });
};