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

feat: Refactor asset loading and model handling; remove unused loadInitialWallItems function and streamline GLTFLoader usage across components

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-08-01 14:20:04 +05:30
parent 9be044c941
commit 14d03bbdd2
10 changed files with 300 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
app/src/modules/builder/IntialLoad/loadInitialWallItems.ts
View File

@@ -1,110 +0,0 @@
// import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
// import * as THREE from "three";
// import * as Types from "../../../types/world/worldTypes";
// import { getWallItems } from "../../../services/factoryBuilder/asset/wallAsset/getWallItemsApi";
// import { retrieveGLTF, storeGLTF } from "../../../utils/indexDB/idbUtils";
// import { getUserData } from "../../../functions/getUserData";
// async function loadInitialWallItems(
// setWallItems: Types.setWallItemSetState,
// projectId?: string,
// versionId?: string
// ): Promise<void> {
// if (!projectId || !versionId) return;
// try {
// const { organization, email } = getUserData();
// if (!email) {
// console.error("No email found in localStorage");
// }
// const items = await getWallItems(organization, projectId, versionId);
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
// if (!items || items.length === 0) {
// localStorage.removeItem("WallItems");
// return;
// }
// localStorage.setItem("WallItems", JSON.stringify(items));
// 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);
// const loadedWallItems = await Promise.all(
// items.map(async (item: Types.WallItem) => {
// // Check THREE.js cache first
// const cachedModel = THREE.Cache.get(item.assetId!);
// if (cachedModel) {
// return processModel(cachedModel, item);
// }
// // Check IndexedDB cache
// const cachedModelBlob = await retrieveGLTF(item.assetId!);
// if (cachedModelBlob) {
// const blobUrl = URL.createObjectURL(cachedModelBlob);
// return new Promise<Types.WallItem>((resolve) => {
// loader.load(blobUrl, (gltf) => {
// URL.revokeObjectURL(blobUrl);
// THREE.Cache.add(item.assetId!, gltf);
// resolve(processModel(gltf, item));
// });
// });
// }
// // Load from original URL if not cached
// const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${item.assetId!}`;
// return new Promise<Types.WallItem>((resolve) => {
// loader.load(modelUrl, async (gltf) => {
// try {
// // Cache the model
// const modelBlob = await fetch(modelUrl).then((res) => res.blob());
// await storeGLTF(item.assetId!, modelBlob);
// THREE.Cache.add(item.assetId!, gltf);
// resolve(processModel(gltf, item));
// } catch (error) {
// console.error("Failed to cache model:", error);
// resolve(processModel(gltf, item));
// }
// });
// });
// })
// );
// setWallItems(loadedWallItems);
// } catch (error) {
// console.error("Failed to load wall items:", error);
// }
// }
// function processModel(gltf: GLTF, item: Types.WallItem): Types.WallItem {
// const model = gltf.scene.clone();
// model.uuid = item.modelUuid!;
// model.children[0]?.children?.forEach((child: THREE.Object3D) => {
// if (child.name !== "CSG_REF") {
// child.castShadow = true;
// child.receiveShadow = true;
// }
// });
// return {
// type: item.type,
// model: model,
// modelName: item.modelName,
// assetId: item.assetId,
// scale: item.scale,
// csgscale: item.csgscale,
// csgposition: item.csgposition,
// position: item.position,
// quaternion: item.quaternion,
// };
// }
// export default loadInitialWallItems;

5
app/src/modules/builder/asset/assetsGroup.tsx
View File

@@ -44,6 +44,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
useEffect(() => { useEffect(() => {
if (!projectId || !selectedVersion) return; if (!projectId || !selectedVersion) return;
clearEvents(); clearEvents();
let totalAssets = 0; let totalAssets = 0;
@@ -304,7 +305,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
pointer.x = (event.clientX / window.innerWidth) * 2 - 1; pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1; pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
addAssetModel(scene, raycaster, camera, pointer, socket, selectedItem, setSelectedItem, addEvent, addAsset, plane, selectedVersion, projectId, userId); addAssetModel(scene, raycaster, camera, pointer, socket, selectedItem, setSelectedItem, addEvent, addAsset, plane, loader, selectedVersion, projectId, userId);
} }
}; };
@@ -348,7 +349,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
}, [selectedItem, camera, activeModule, controls, isRenameMode]); }, [selectedItem, camera, activeModule, controls, isRenameMode]);
return ( return (
<Models /> <Models loader={loader} />
) )
} }

7
app/src/modules/builder/asset/functions/addAssetModel.ts
View File

@@ -20,6 +20,7 @@ async function addAssetModel(
addEvent: (event: EventsSchema) => void, addEvent: (event: EventsSchema) => void,
addAsset: (asset: Asset) => void, addAsset: (asset: Asset) => void,
plane: Types.RefMesh, plane: Types.RefMesh,
loader: GLTFLoader,
selectedVersion?: Version | null, selectedVersion?: Version | null,
projectId?: string, projectId?: string,
userId?: string userId?: string
@@ -29,12 +30,6 @@ async function addAssetModel(
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
try { try {
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);
raycaster.setFromCamera(pointer, camera); raycaster.setFromCamera(pointer, camera);
const wallFloorsGroup = scene.getObjectByName("Walls-Floors-Group") as Types.Group | null; const wallFloorsGroup = scene.getObjectByName("Walls-Floors-Group") as Types.Group | null;
const floorsGroup = scene.getObjectByName("Floors-Group") as Types.Group | null; const floorsGroup = scene.getObjectByName("Floors-Group") as Types.Group | null;

9
app/src/modules/builder/asset/models/model/model.tsx
View File

@@ -2,7 +2,6 @@ import * as THREE from 'three';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils'; import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils';
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { ThreeEvent, useThree } from '@react-three/fiber'; import { ThreeEvent, useThree } from '@react-three/fiber';
import { useActiveTool, useDeletableFloorItem, useSelectedAssets, useSelectedFloorItem, useSocketStore, useToggleView, useToolMode } from '../../../../../store/builder/store'; import { useActiveTool, useDeletableFloorItem, useSelectedAssets, useSelectedFloorItem, useSocketStore, useToggleView, useToolMode } from '../../../../../store/builder/store';
import { AssetBoundingBox } from '../../functions/assetBoundingBox'; import { AssetBoundingBox } from '../../functions/assetBoundingBox';
@@ -21,8 +20,7 @@ import { upsertProductOrEventApi } from '../../../../../services/simulation/prod
import { getAssetIksApi } from '../../../../../services/simulation/ik/getAssetIKs'; import { getAssetIksApi } from '../../../../../services/simulation/ik/getAssetIKs';
import { ModelAnimator } from './animator/modelAnimator'; import { ModelAnimator } from './animator/modelAnimator';
function Model({ asset, isRendered, loader }: { readonly asset: Asset, isRendered: boolean, loader: GLTFLoader }) {
function Model({ asset, isRendered }: { readonly asset: Asset, isRendered: boolean }) {
const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
const savedTheme: string = localStorage.getItem("theme") || "light"; const savedTheme: string = localStorage.getItem("theme") || "light";
const { controls, gl } = useThree(); const { controls, gl } = useThree();
@@ -109,11 +107,6 @@ function Model({ asset, isRendered }: { readonly asset: Asset, isRendered: boole
}, [isRendered, selectedFloorItem]) }, [isRendered, selectedFloorItem])
useEffect(() => { useEffect(() => {
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);
const loadModel = async () => { const loadModel = async () => {
try { try {

5
app/src/modules/builder/asset/models/models.tsx
View File

@@ -7,10 +7,11 @@ import { useSelectedAsset } from '../../../../store/simulation/useSimulationStor
import { useSceneContext } from '../../../scene/sceneContext'; import { useSceneContext } from '../../../scene/sceneContext';
import Model from './model/model'; import Model from './model/model';
import { GLTFLoader } from "three/examples/jsm/Addons";
const distanceWorker = new Worker(new URL("../../../../services/factoryBuilder/webWorkers/distanceWorker.js", import.meta.url)); const distanceWorker = new Worker(new URL("../../../../services/factoryBuilder/webWorkers/distanceWorker.js", import.meta.url));
function Models() { function Models({ loader }: { loader: GLTFLoader }) {
const { controls, camera } = useThree(); const { controls, camera } = useThree();
const { assetStore } = useSceneContext(); const { assetStore } = useSceneContext();
const { assets } = assetStore(); const { assets } = assetStore();
@@ -57,7 +58,7 @@ function Models() {
}} }}
> >
{assets.map((asset) => ( {assets.map((asset) => (
<Model key={asset.modelUuid} asset={asset} isRendered={renderMap[asset.modelUuid] ?? false} /> <Model key={asset.modelUuid} asset={asset} isRendered={renderMap[asset.modelUuid] ?? false} loader={loader} />
))} ))}
</group> </group>
); );

1
app/src/modules/builder/wallAsset/Instances/Instances/wallAssetInstance.tsx
View File

@@ -44,6 +44,7 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/'); dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
loader.setDRACOLoader(dracoLoader); loader.setDRACOLoader(dracoLoader);
const loadModel = async () => { const loadModel = async () => {
try { try {
// Check Cache // Check Cache

7
app/src/modules/collaboration/camera/collabCams.tsx
View File

@@ -19,7 +19,7 @@ import { getUserData } from "../../../functions/getUserData";
const CamModelsGroup = () => { const CamModelsGroup = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const groupRef = useRef<THREE.Group>(null); const groupRef = useRef<THREE.Group>(null);
const { userId, organization, email } = getUserData(); const { organization, email } = getUserData();
const { setActiveUsers } = useActiveUsers(); const { setActiveUsers } = useActiveUsers();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
@@ -31,14 +31,11 @@ const CamModelsGroup = () => {
dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/"); dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
loader.setDRACOLoader(dracoLoader); loader.setDRACOLoader(dracoLoader);
const { camMode } = useCamMode(); const { camMode } = useCamMode();
const { camera, controls } = useThree(); // Access R3F camera and controls const { camera, controls } = useThree();
useEffect(() => { useEffect(() => {
if (camMode !== "FollowPerson") return; if (camMode !== "FollowPerson") return;
// If a user is selected, set the camera view to their location
// and update the camera and controls accordingly
if (selectedUser?.location) { if (selectedUser?.location) {
const { position, rotation, target } = selectedUser.location; const { position, rotation, target } = selectedUser.location;
if (rotation && target) if (rotation && target)

8
app/src/modules/scene/postProcessing/postProcessing.tsx
View File

@@ -79,17 +79,17 @@ export default function PostProcessing() {
denoiseRadius={6} denoiseRadius={6}
denoiseSamples={16} denoiseSamples={16}
/> />
<DepthOfField {/* <DepthOfField
focusDistance={0} focusDistance={0}
focalLength={0.15} focalLength={0.15}
bokehScale={2} bokehScale={2}
/> /> */}
<Bloom {/* <Bloom
intensity={0.1} intensity={0.1}
luminanceThreshold={0.9} luminanceThreshold={0.9}
luminanceSmoothing={0.025} luminanceSmoothing={0.025}
mipmapBlur={false} mipmapBlur={false}
/> /> */}
{selectedWallAsset && ( {selectedWallAsset && (
<Outline <Outline
selection={flattenChildren(selectedWallAsset.children)} selection={flattenChildren(selectedWallAsset.children)}

13
app/src/modules/simulation/spatialUI/arm/armBotUI.tsx
View File

@@ -55,7 +55,6 @@ const ArmBotUI = () => {
}) })
} }
// Fetch and setup selected ArmBot data
useEffect(() => { useEffect(() => {
if (selectedEventSphere) { if (selectedEventSphere) {
const selectedArmBot = getEventByModelUuid(selectedProduct.productUuid, selectedEventSphere.userData.modelUuid); const selectedArmBot = getEventByModelUuid(selectedProduct.productUuid, selectedEventSphere.userData.modelUuid);
@@ -86,13 +85,11 @@ const ArmBotUI = () => {
const modelData = getEventByModelUuid(selectedProduct.productUuid, modelUuid); const modelData = getEventByModelUuid(selectedProduct.productUuid, modelUuid);
if (modelData?.type === "roboticArm") { if (modelData?.type === "roboticArm") {
const baseX = modelData.point.position?.[0] || 0; const baseY = modelData.point.position?.[1] || 0;
const baseY = modelData.point.position?.[1] || 0;;
const baseZ = modelData.point.position?.[2] || 0;
return { return {
pick: [baseX, baseY, baseZ + 0.5], pick: [0, baseY, 0 + 0.5],
drop: [baseX, baseY, baseZ - 0.5], drop: [0, baseY, 0 - 0.5],
default: [baseX, baseY, baseZ], default: [0, baseY, 0],
}; };
} }
@@ -225,7 +222,7 @@ const ArmBotUI = () => {
</React.Fragment> </React.Fragment>
); );
} else { } else {
return null; // important! must return something return null;
} }
})} })}
</> </>