Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Loading Screen, Integerated events ui

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-03-26 18:33:51 +05:30
parent 5628628de5
commit 2717da6bae
18 changed files with 594 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
app/src/modules/builder/groups/floorItemsGroup.tsx
View File

@@ -1,5 +1,5 @@
import { useFrame, useThree } from "@react-three/fiber";
import { useActiveTool, useCamMode, useDeletableFloorItem, useDeleteModels, useFloorItems, useRenderDistance, useselectedFloorItem, useSelectedItem, useSocketStore, useToggleView, useTransformMode } from "../../../store/store";
import { useActiveTool, useCamMode, useDeletableFloorItem, useDeleteModels, useFloorItems, useLoadingProgress, useRenderDistance, useselectedFloorItem, useSelectedItem, useSocketStore, useToggleView, useTransformMode } from "../../../store/store";
import assetVisibility from "../geomentries/assets/assetVisibility";
import { useEffect } from "react";
import * as THREE from "three";
@@ -11,24 +11,25 @@ import DeletableHoveredFloorItems from "../geomentries/assets/deletableHoveredFl
import DeleteFloorItems from "../geomentries/assets/deleteFloorItems";
import loadInitialFloorItems from "../../scene/IntialLoad/loadInitialFloorItems";
import addAssetModel from "../geomentries/assets/addAssetModel";
// import { getFloorItems } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
import { getFloorItems } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
// import { retrieveGLTF } from "../../../utils/indexDB/idbUtils";
const assetManagerWorker = new Worker(new URL('../../../services/factoryBuilder/webWorkers/assetManagerWorker.js', import.meta.url));
// 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));
const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject, floorGroup, tempLoader, isTempLoader, plane }: any) => {
const state: Types.ThreeState = useThree();
const { raycaster, camera, controls, pointer }: any = state;
const { renderDistance, setRenderDistance } = useRenderDistance();
const { toggleView, setToggleView } = useToggleView();
const { raycaster, controls }: any = state;
const { renderDistance } = useRenderDistance();
const { toggleView } = useToggleView();
const { floorItems, setFloorItems } = useFloorItems();
const { camMode, setCamMode } = useCamMode();
const { deleteModels, setDeleteModels } = useDeleteModels();
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
const { transformMode, setTransformMode } = useTransformMode();
const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem();
const { activeTool, setActiveTool } = useActiveTool();
const { camMode } = useCamMode();
const { deleteModels } = useDeleteModels();
const { setDeletableFloorItem } = useDeletableFloorItem();
const { transformMode } = useTransformMode();
const { setselectedFloorItem } = useselectedFloorItem();
const { activeTool } = useActiveTool();
const { selectedItem, setSelectedItem } = useSelectedItem();
const { setLoadingProgress } = useLoadingProgress();
const { socket } = useSocketStore();
const loader = new GLTFLoader();
@@ -38,32 +39,57 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
loader.setDRACOLoader(dracoLoader);
useEffect(() => {
// Load initial floor items
const email = localStorage.getItem('email');
const organization = (email!.split("@")[1]).split(".")[0];
// const email = localStorage.getItem('email');
// const organization = (email!.split("@")[1]).split(".")[0];
let totalAssets = 0;
let loadedAssets = 0;
// getFloorItems(organization).then((data) => {
// gltfLoaderWorker.postMessage({ FloorItems: data })
// })
const updateLoadingProgress = (progress: number) => {
if (progress < 100) {
setLoadingProgress(progress);
} else if (progress === 100) {
setTimeout(() => {
setLoadingProgress(100);
setTimeout(() => {
setLoadingProgress(0);
}, 1500);
}, 1000);
}
};
// gltfLoaderWorker.onmessage = async (event) => {
// if (event.data.message === "gltfLoaded" && event.data.modelBlob) {
// const blobUrl = URL.createObjectURL(event.data.modelBlob);
getFloorItems(organization).then((data) => {
const uniqueItems = (data as Types.FloorItems).filter((item, index, self) =>
index === self.findIndex((t) => t.modelfileID === item.modelfileID)
);
totalAssets = uniqueItems.length;
if (totalAssets === 0) {
updateLoadingProgress(100);
return;
}
gltfLoaderWorker.postMessage({ floorItems: data });
});
// loader.load(blobUrl, (gltf) => {
// URL.revokeObjectURL(blobUrl);
// THREE.Cache.remove(blobUrl);
// THREE.Cache.add(event.data.modelID, gltf);
// });
gltfLoaderWorker.onmessage = async (event) => {
if (event.data.message === "gltfLoaded" && event.data.modelBlob) {
const blobUrl = URL.createObjectURL(event.data.modelBlob);
// } else if (event.data.message === "done") {
// loadInitialFloorItems(itemsGroup, setFloorItems);
// }
// }
loader.load(blobUrl, (gltf) => {
URL.revokeObjectURL(blobUrl);
THREE.Cache.remove(blobUrl);
THREE.Cache.add(event.data.modelID, gltf);
loadedAssets++;
const progress = Math.round((loadedAssets / totalAssets) * 100);
updateLoadingProgress(progress);
loadInitialFloorItems(itemsGroup, setFloorItems);
if (loadedAssets === totalAssets) {
loadInitialFloorItems(itemsGroup, setFloorItems);
updateLoadingProgress(100);
}
});
}
};
}, []);
useEffect(() => {

2
app/src/modules/builder/groups/zoneGroup.tsx
View File

@@ -145,7 +145,7 @@ const ZoneGroup: React.FC = () => {
const target: [number, number, number] | null = calculateCenter(zone.points);
if (!target) return;
const position = [target[0], 75, target[2]];
const position = [target[0], 50, target[2]];
const input = {
userId: userId,