@inweb/viewer-three 26.10.6 → 26.11.1

package/src/Viewer/commands/ZoomToObjects.ts

@@ -26,13 +26,12 @@ import type { Viewer } from "../Viewer";
 import { zoomTo } from "./ZoomTo";
 
 export function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
-  const handleSet = new Set(handles);
-  const objects = [];
-  viewer.scene.traverseVisible((child) => {
-    if (handleSet.has(child.userData?.handle)) objects.push(child);
-  });
+  const extents = new Box3();
 
-  const extents = objects.reduce((result: Box3, object) => result.expandByObject(object), new Box3());
+  viewer.models.forEach((model) => {
+    const objects = model.getObjectsByHandles(handles);
+    objects.forEach((object) => extents.expandByObject(object));
+  });
   if (extents.isEmpty()) extents.copy(viewer.extents);
 
   zoomTo(viewer, extents);

package/src/Viewer/commands/ZoomToSelected.ts

@@ -26,7 +26,9 @@ import type { Viewer } from "../Viewer";
 import { zoomTo } from "./ZoomTo";
 
 export function zoomToSelected(viewer: Viewer): void {
-  const extents = viewer.selected.reduce((result: Box3, object) => result.expandByObject(object), new Box3());
+  const extents = new Box3();
+
+  viewer.selected.forEach((object) => extents.expandByObject(object));
   if (extents.isEmpty()) extents.copy(viewer.extents);
 
   zoomTo(viewer, extents);

package/src/Viewer/commands/index.ts

@@ -32,6 +32,7 @@ import { explode, collect } from "./Explode";
 import { getDefaultViewPositions } from "./GetDefaultViewPositions";
 import { getModels } from "./GetModels";
 import { getSelected } from "./GetSelected";
+import { getSelected2 } from "./GetSelected2";
 import { hideSelected } from "./HideSelected";
 import { isolateSelected } from "./IsolateSelected";
 import { regenerateAll } from "./RegenerateAll";
@@ -41,6 +42,7 @@ import { setActiveDragger } from "./SetActiveDragger";
 import { setDefaultViewPosition } from "./SetDefaultViewPosition";
 import { setMarkupColor } from "./SetMarkupColor";
 import { setSelected } from "./SetSelected";
+import { setSelected2 } from "./SetSelected2";
 import { showAll } from "./ShowAll";
 import { zoomToExtents } from "./ZoomToExtents";
 import { zoomToObjects } from "./ZoomToObjects";
@@ -86,6 +88,7 @@ commands.registerCommand("explode", explode);
 commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
 commands.registerCommand("getModels", getModels);
 commands.registerCommand("getSelected", getSelected);
+commands.registerCommand("getSelected2", getSelected2);
 commands.registerCommand("hideSelected", hideSelected);
 commands.registerCommand("isolateSelected", isolateSelected);
 commands.registerCommand("regenerateAll", regenerateAll);
@@ -95,6 +98,7 @@ commands.registerCommand("setActiveDragger", setActiveDragger);
 commands.registerCommand("setDefaultViewPosition", setDefaultViewPosition);
 commands.registerCommand("setMarkupColor", setMarkupColor);
 commands.registerCommand("setSelected", setSelected);
+commands.registerCommand("setSelected2", setSelected2);
 commands.registerCommand("showAll", showAll);
 commands.registerCommand("zoomToExtents", zoomToExtents);
 commands.registerCommand("zoomToObjects", zoomToObjects);

package/src/Viewer/components/CameraComponent.ts

@@ -119,9 +119,14 @@ export class CameraComponent implements IComponent {
   };
 
   geometryEnd = () => {
+    // do not change the camera after opening the second file in assembly
+    if (this.viewer.models.length > 1) {
+      this.switchCamera(this.viewer.camera);
+      return;
+    }
+
     let camera: any;
 
-    // TODO: do not change the camera and target after opening the second model in "append" mode
     this.viewer.scene.traverse((object: any) => {
       if (object.isCamera)
         if (!camera) camera = object;

package/src/Viewer/components/ExtentsComponent.ts

@@ -53,8 +53,11 @@ export class ExtentsComponent implements IComponent {
   syncExtents = () => {
     const extents = new Box3();
     this.viewer.models.forEach((model) => model.getExtents(extents));
-
     this.viewer.extents.copy(extents);
+
+    // do not change target after opening the second file in assembly
+    if (this.viewer.models.length > 1) return;
+
     this.viewer.extents.getCenter(this.viewer.target);
   };
 }

package/src/Viewer/components/SelectionComponent.ts

@@ -84,7 +84,9 @@ export class SelectionComponent implements IComponent {
     }
 
     this.viewer.update();
+
     this.viewer.emitEvent({ type: "select", data: undefined, handles: this.viewer.getSelected() });
+    this.viewer.emitEvent({ type: "select2", data: undefined, handles: this.viewer.getSelected2() });
   };
 
   onDoubleClick = (event: MouseEvent) => {

package/src/Viewer/components/index.ts

@@ -41,8 +41,8 @@ import { ResetComponent } from "./ResetComponent";
  *
  * 1. Define a component class implements {@link IComponent}.
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
- * 3. Define the component logic in the event listeners. For example, listen for the `mousedown` event and
- *    select objects when the left mouse button is pressed.
+ * 3. Define the component logic in the event listeners. For example, listen for the `geometryend` event and
+ *    implement post-processing logic for the model.
  * 4. Override {@link IComponent.dispose} and remove mouse event listeners from the viewer.
  * 5. Register component provider in the components registry by calling the
  *    {@link components.registerComponent}.
@@ -57,15 +57,15 @@ import { ResetComponent } from "./ResetComponent";
  *
  *   constructor(viewer: Viewer) {
  *     this.viewer = viewer;
- *     this.viewer.addEventListener("mousedown", this.onMouseDown);
+ *     this.viewer.addEventListener("geometryend", this.onGeometryEnd);
  *   }
  *
  *   override dispose() {
- *     this.viewer.removeEventListener("mousedown", this.onMouseDown);
+ *     this.viewer.removeEventListener("geometryend", this.onGeometryEnd);
  *   }
  *
- *   onMouseDown = (event: PointerEvent) => {
- *     // place custom logic here
+ *   onGeometryEnd = (event: MouseEvent) => {
+ *     this.viewer.executeCommand("zoomToExtents");
  *   };
  * }
  *

package/src/Viewer/loaders/DynamicGltfLoader/DynamicGltfLoader.js

@@ -10,6 +10,7 @@ import {
   LineLoop,
   Group,
   Vector3,
+  Vector2,
   Quaternion,
   Matrix4,
   Box3,
@@ -26,6 +27,8 @@ import {
 import { GL_CONSTANTS } from "./GltfStructure.js";
 import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
 
+const STRUCTURE_ID_SEPARATOR = ":";
+
 //#AI-GENERATED using Gemini 2.5 Pro, Claude-4-sonnet
 //#Reviewed and adapted by dborysov@opendesign.com
 
@@ -42,6 +45,7 @@ export class DynamicGltfLoader {
       geometryerror: [],
       update: [],
       geometrymemory: [],
+      optimizationprogress: [],
     };
 
     this.loadDistance = 100;
@@ -98,7 +102,6 @@ export class DynamicGltfLoader {
     this.newOptimizedObjects = new Set();
     this.oldOptimizeObjects = new Set();
 
-    this.maxConcurrentChunks = 8;
     this.activeChunkLoads = 0;
     this.chunkQueue = [];
 
@@ -113,6 +116,8 @@ export class DynamicGltfLoader {
     // Merged geometry tracking
     this.mergedObjectMap = new Map(); // objectId -> {mergedObject, startIndex, endIndex, vertexCount}
     this.mergedGeometryVisibility = new Map(); // mergedObject -> visibility array
+
+    this._webglInfoCache = null; // { renderer, vendor }
   }
 
   setVisibleEdges(visible) {
@@ -244,6 +249,136 @@ export class DynamicGltfLoader {
     console.log(`Final memory usage: ${Math.round(currentMemoryUsage / (1024 * 1024))}MB`);
   }
 
+  getStats() {
+    let totalObjects = 0;
+    let renderedObjects = 0;
+    let totalTriangles = 0;
+    let renderedTriangles = 0;
+    let totalLines = 0;
+    let renderedLines = 0;
+    let totalEdges = 0;
+    let renderedEdges = 0;
+
+    this.scene.traverse((object) => {
+      totalObjects++;
+
+      const geometry = object.geometry;
+      if (!geometry) return;
+
+      let triCount = 0;
+      if (geometry.index) {
+        triCount = Math.floor(geometry.index.count / 3);
+      } else if (geometry.attributes && geometry.attributes.position) {
+        triCount = Math.floor(geometry.attributes.position.count / 3);
+      }
+      totalTriangles += triCount;
+
+      let lineCount = 0;
+      if (geometry.index) {
+        lineCount = Math.floor(geometry.index.count / 2);
+      } else if (geometry.attributes && geometry.attributes.position) {
+        lineCount = Math.floor(geometry.attributes.position.count / 2);
+      }
+
+      if (object.type === "Line" || object.type === "LineSegments" || object.type === "LineLoop") {
+        if (object.userData.isEdge) {
+          totalEdges += lineCount;
+        } else {
+          totalLines += lineCount;
+        }
+      }
+
+      if (object.visible !== false) {
+        if (object.isMesh || object.isLine || object.isPoints) {
+          renderedObjects++;
+          if (object.isMesh) {
+            renderedTriangles += triCount;
+          } else if (object.type === "Line" || object.type === "LineSegments" || object.type === "LineLoop") {
+            if (object.userData.isEdge) {
+              renderedEdges += lineCount;
+            } else {
+              renderedLines += lineCount;
+            }
+          }
+        }
+      }
+    });
+
+    const geometryCount = this.geometryCache ? this.geometryCache.size : 0;
+    const geometryMemoryBytes = Array.from(this.geometryCache?.values?.() || []).reduce((a, b) => a + b, 0);
+
+    const uniqueMaterialIds = new Set();
+    const uniqueTextureIds = new Set();
+    if (Array.isArray(this.structures)) {
+      for (const structure of this.structures) {
+        console.log(structure.materialCache.values());
+        try {
+          for (const entry of structure.materialCache.values()) {
+            if (entry?.mesh?.uuid) uniqueMaterialIds.add(entry.mesh.uuid);
+            if (entry?.points?.uuid) uniqueMaterialIds.add(entry.points.uuid);
+            if (entry?.lines?.uuid) uniqueMaterialIds.add(entry.lines.uuid);
+          }
+        } catch (exp) {
+          console.error("Error adding material to uniqueMaterialIds", exp);
+        }
+      }
+    }
+    const materialCount = uniqueMaterialIds.size;
+    const textureCount = uniqueTextureIds.size;
+    const estimatedGpuMemoryBytes = geometryMemoryBytes;
+
+    if (!this._webglInfoCache) {
+      try {
+        const gl = this.renderer.getContext();
+        const dbgInfo = gl.getExtension("WEBGL_debug_renderer_info");
+        if (dbgInfo) {
+          const rendererStr = gl.getParameter(dbgInfo.UNMASKED_RENDERER_WEBGL);
+          const vendorStr = gl.getParameter(dbgInfo.UNMASKED_VENDOR_WEBGL);
+          this._webglInfoCache = { renderer: rendererStr, vendor: vendorStr };
+        } else {
+          this._webglInfoCache = { renderer: null, vendor: null };
+        }
+      } catch (e) {
+        console.error("Error getting webgl info", e);
+        this._webglInfoCache = { renderer: null, vendor: null };
+      }
+    }
+
+    const size = new Vector2();
+    if (this.renderer && this.renderer.getSize) {
+      this.renderer.getSize(size);
+    }
+
+    return {
+      scene: {
+        beforeOptimization: {
+          objects: totalObjects - renderedObjects,
+          triangles: totalTriangles - renderedTriangles,
+          lines: totalLines - renderedLines,
+          edges: totalEdges - renderedEdges,
+        },
+
+        afterOptimization: {
+          objects: renderedObjects,
+          triangles: renderedTriangles,
+          lines: renderedLines,
+          edges: renderedEdges,
+        },
+      },
+      memory: {
+        geometries: { count: geometryCount, bytes: geometryMemoryBytes },
+        textures: { count: textureCount },
+        materials: { count: materialCount },
+        totalEstimatedGpuBytes: estimatedGpuMemoryBytes,
+      },
+      system: {
+        webglRenderer: this._webglInfoCache?.renderer || "",
+        webglVendor: this._webglInfoCache?.vendor || "",
+        viewport: { width: size.x || 0, height: size.y || 0 },
+      },
+    };
+  }
+
   async loadNode(nodeId, onLoadFinishCb) {
     const node = this.nodes.get(nodeId);
     if (!node || node.loaded || node.loading) return;
@@ -431,7 +566,7 @@ export class DynamicGltfLoader {
         if (node.handle) {
           mesh.userData.handle = node.handle;
         } else {
-          mesh.userData.handle = `${node.structure.id}_${mesh.userData.handle}`;
+          mesh.userData.handle = `${node.structure.id}${STRUCTURE_ID_SEPARATOR}${mesh.userData.handle}`;
         }
         if (mesh.material.name === "edges") {
           mesh.userData.isEdge = true;
@@ -607,7 +742,7 @@ export class DynamicGltfLoader {
 
     let handle = null;
     if (nodeDef.extras?.handle) {
-      handle = `${structure.id}_${nodeDef.extras.handle}`;
+      handle = `${structure.id}${STRUCTURE_ID_SEPARATOR}${nodeDef.extras.handle}`;
     }
 
     if (nodeDef.camera !== undefined) {
@@ -628,7 +763,7 @@ export class DynamicGltfLoader {
       if (nodeDef.extras) {
         nodeGroup.userData = { ...nodeDef.extras };
         if (nodeGroup.userData.handle) {
-          nodeGroup.userData.handle = `${structure.id}_${nodeGroup.userData.handle}`;
+          nodeGroup.userData.handle = `${structure.id}${STRUCTURE_ID_SEPARATOR}${nodeGroup.userData.handle}`;
         }
       }
 
@@ -680,7 +815,7 @@ export class DynamicGltfLoader {
       }
 
       if (meshDef.extras && meshDef.extras.handle) {
-        handle = `${structure.id}_${meshDef.extras.handle}`;
+        handle = `${structure.id}${STRUCTURE_ID_SEPARATOR}${meshDef.extras.handle}`;
       }
 
       this.nodes.set(uniqueNodeId, {
@@ -785,13 +920,13 @@ export class DynamicGltfLoader {
   }
 
   async loadNodes() {
-    console.time("process nodes");
+    console.time("Process nodes");
     await this.processNodes();
-    console.timeEnd("process nodes");
+    console.timeEnd("Process nodes");
 
-    console.time("optimize scene");
+    console.time("Optimize scene");
     await this.optimizeScene();
-    console.timeEnd("optimize scene");
+    console.timeEnd("Optimize scene");
   }
 
   cleanupPartialLoad() {
@@ -955,7 +1090,7 @@ export class DynamicGltfLoader {
   }
 
   createVisibilityMaterial(material) {
-    // Применяем шейдер напрямую к оригинальному материалу
+    // Apply shader directly to the original material
     material.onBeforeCompile = (shader) => {
       shader.vertexShader = shader.vertexShader.replace(
         "#include <common>",
@@ -991,7 +1126,7 @@ export class DynamicGltfLoader {
       );
     };
 
-    // Принудительная перекомпиляция материала
+    // Force recompilation of material
     material.needsUpdate = true;
 
     return material;
@@ -1162,7 +1297,7 @@ export class DynamicGltfLoader {
     }
     this.handleToObjects.get(fullHandle).add(object);
 
-    object.userData.structureId = object.userData.handle.split("_")[0];
+    object.userData.structureId = object.userData.handle.split(STRUCTURE_ID_SEPARATOR)[0];
   }
 
   getObjectsByHandle(handle) {
@@ -1237,11 +1372,32 @@ export class DynamicGltfLoader {
     this.originalObjects.add(object);
   }
 
-  optimizeScene() {
+  yieldToUI() {
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        setTimeout(resolve, 0);
+      });
+    });
+  }
+
+  async optimizeScene() {
+    console.log("Starting scene optimization...");
+    this.dispatchEvent("optimizationprogress", {
+      phase: "start",
+      progress: 0,
+      message: "Starting optimization...",
+    });
+
     this.originalObjects.clear();
     this.originalObjectsToSelection.clear();
     const structureGroups = new Map();
 
+    this.dispatchEvent("optimizationprogress", {
+      phase: "collecting",
+      progress: 5,
+      message: "Collecting scene objects...",
+    });
+
     this.scene.traverse((object) => {
       if (object.userData.structureId) {
         const structureId = object.userData.structureId;
@@ -1274,32 +1430,78 @@ export class DynamicGltfLoader {
       }
     });
 
+    let processedGroups = 0;
+    const totalGroups = structureGroups.size;
+
+    this.dispatchEvent("optimizationprogress", {
+      phase: "merging",
+      progress: 10,
+      message: `Merging ${totalGroups} structure groups...`,
+      current: 0,
+      total: totalGroups,
+    });
+
     for (const group of structureGroups.values()) {
       group.mapMeshes.clear();
       group.mapLines.clear();
       group.mapLineSegments.clear();
       group.mapPoints.clear();
 
-      this.mergeMeshGroups(group.meshes, group.rootGroup);
-      this.mergeLineGroups(group.lines, group.rootGroup);
-      this.mergeLineSegmentGroups(group.lineSegments, group.rootGroup);
-      this.mergePointsGroups(group.points, group.rootGroup);
+      await this.mergeMeshGroups(group.meshes, group.rootGroup);
+      await this.yieldToUI();
+
+      await this.mergeLineGroups(group.lines, group.rootGroup);
+      await this.yieldToUI();
+
+      await this.mergeLineSegmentGroups(group.lineSegments, group.rootGroup);
+      await this.yieldToUI();
+
+      await this.mergePointsGroups(group.points, group.rootGroup);
+
+      processedGroups++;
+      const progress = 10 + Math.round((processedGroups / totalGroups) * 80);
+
+      this.dispatchEvent("optimizationprogress", {
+        phase: "merging",
+        progress,
+        message: `Processing structure ${processedGroups}/${totalGroups}...`,
+        current: processedGroups,
+        total: totalGroups,
+      });
+
+      console.log(`Optimization progress: ${processedGroups}/${totalGroups} structure groups processed (${progress}%)`);
+
+      await this.yieldToUI();
     }
 
+    this.dispatchEvent("optimizationprogress", {
+      phase: "finalizing",
+      progress: 95,
+      message: "Finalizing optimization...",
+    });
+
     this.originalObjects.forEach((obj) => {
       obj.visible = false;
       if (!(obj instanceof Points) && !obj.userData.isEdge) {
         this.originalObjectsToSelection.add(obj);
       }
     });
+
     this.initializeObjectVisibility();
 
     console.log(`Optimization complete. Total objects: ${this.maxObjectId}`);
 
+    this.dispatchEvent("optimizationprogress", {
+      phase: "complete",
+      progress: 100,
+      message: `Optimization complete! ${this.maxObjectId} objects processed.`,
+    });
+
     this.dispatchEvent("update");
   }
 
-  mergeMeshGroups(materialGroups, rootGroup) {
+  async mergeMeshGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
         console.warn("Skipping mesh group with null material");
@@ -1399,6 +1601,11 @@ export class DynamicGltfLoader {
             this.handleToOptimizedObjects.set(handle, mergedObjects);
           }
         });
+
+        processedGroups++;
+        if (processedGroups % 5 === 0) {
+          await this.yieldToUI();
+        }
       } catch (error) {
         console.error("Failed to merge meshes for material:", error);
         group.objects.forEach((mesh) => {
@@ -1408,7 +1615,8 @@ export class DynamicGltfLoader {
     }
   }
 
-  mergeLineGroups(materialGroups, rootGroup) {
+  async mergeLineGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (group.objects.length === 0) continue;
 
@@ -1433,7 +1641,9 @@ export class DynamicGltfLoader {
       const indices = [];
       let vertexOffset = 0;
 
+      let isEdge = false;
       group.objects.forEach((line) => {
+        isEdge = line.userData.isEdge;
         const geometry = line.geometry;
         const positionAttr = geometry.attributes.position;
         const vertexCount = positionAttr.count;
@@ -1442,7 +1652,6 @@ export class DynamicGltfLoader {
         if (!this.objectIdToIndex.has(handle)) {
           this.objectIdToIndex.set(handle, this.maxObjectId++);
         }
-        // const objectId = this.objectIdToIndex.get(handle);
 
         objectMapping.set(line, {
           startVertexIndex: currentVertexOffset,
@@ -1497,6 +1706,8 @@ export class DynamicGltfLoader {
       const visibilityMaterial = this.createVisibilityMaterial(group.material);
 
       const mergedLine = new LineSegments(geometry, visibilityMaterial);
+      mergedLine.userData.isEdge = isEdge;
+
       const mergedObjects = [mergedLine];
       if (this.useVAO) {
         this.createVAO(mergedLine);
@@ -1522,10 +1733,16 @@ export class DynamicGltfLoader {
           this.handleToOptimizedObjects.set(handle, mergedObjects);
         }
       });
+
+      processedGroups++;
+      if (processedGroups % 5 === 0) {
+        await this.yieldToUI();
+      }
     }
   }
 
-  mergeLineSegmentGroups(materialGroups, rootGroup) {
+  async mergeLineSegmentGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
         console.warn("Skipping line segment group with null material");
@@ -1538,8 +1755,10 @@ export class DynamicGltfLoader {
         const handles = new Set();
         const objectMapping = new Map();
         let currentVertexOffset = 0;
+        let isEdge = false;
 
         for (const line of group.objects) {
+          isEdge = line.userData.isEdge;
           const geometry = line.geometry.clone();
           line.updateWorldMatrix(true, false);
           geometry.applyMatrix4(line.matrixWorld);
@@ -1585,6 +1804,7 @@ export class DynamicGltfLoader {
           const visibilityMaterial = this.createVisibilityMaterial(group.material);
 
           const mergedLine = new LineSegments(mergedGeometry, visibilityMaterial);
+          mergedLine.userData.isEdge = isEdge;
 
           if (this.useVAO) {
             this.createVAO(mergedLine);
@@ -1618,6 +1838,11 @@ export class DynamicGltfLoader {
             this.handleToOptimizedObjects.set(handle, mergedObjects);
           }
         });
+
+        processedGroups++;
+        if (processedGroups % 5 === 0) {
+          await this.yieldToUI();
+        }
       } catch (error) {
         console.warn("Failed to merge line segments for material:", error);
         group.objects.forEach((line) => {
@@ -1627,7 +1852,8 @@ export class DynamicGltfLoader {
     }
   }
 
-  mergePointsGroups(materialGroups, rootGroup) {
+  async mergePointsGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
         console.warn("Skipping points group with null material");
@@ -1678,6 +1904,11 @@ export class DynamicGltfLoader {
             this.handleToOptimizedObjects.set(handle, mergedObjects);
           }
         });
+
+        processedGroups++;
+        if (processedGroups % 5 === 0) {
+          await this.yieldToUI();
+        }
       } catch (error) {
         console.warn("Failed to merge points for material:", error);
         group.objects.forEach((points) => {

package/src/Viewer/loaders/DynamicGltfLoader/DynamicModelImpl.ts

@@ -30,7 +30,6 @@ import { DynamicGltfLoader } from "./DynamicGltfLoader.js";
 
 export class DynamicModelImpl extends ModelImpl {
   public gltfLoader: DynamicGltfLoader;
-  public modelId: number;
 
   override getExtents(target: Box3): Box3 {
     return target.union(this.gltfLoader.getTotalGeometryExtent());
@@ -53,35 +52,46 @@ export class DynamicModelImpl extends ModelImpl {
   }
 
   override getObjectsByHandles(handles: string | string[]): Object3D[] {
-    const handlesSet = new Set(handles);
+    const ownHandles = this.getOwnHandles(handles);
+    if (ownHandles.length === 0) return [];
+
+    const handlesSet = new Set(ownHandles);
+
     const objects = [];
     handlesSet.forEach((handle) => {
-      const handle2 = `${this.modelId}_${handle}`; // <- props fix: Dynamic Loader uses handle with structure ID prefix
-      const handles = this.gltfLoader.handleToObjects.get(handle2) || [];
-      objects.push(...Array.from(handles));
+      objects.push(...this.gltfLoader.getObjectsByHandle(handle));
     });
+
     return objects;
   }
 
   override getHandlesByObjects(objects: Object3D | Object3D[]): string[] {
-    const handles = super.getHandlesByObjects(objects);
-    return handles.map((x) => x.split("_").pop()); // <- props fix: remove structure ID prefix by the Dynamic Loader
+    const ownObjects = this.getOwnObjects(objects);
+    if (ownObjects.length === 0) return [];
+
+    const handleSet = new Set<string>();
+    ownObjects.forEach((object) => {
+      const handle = object.userData.handle;
+      if (handle) handleSet.add(handle);
+    });
+
+    return Array.from(handleSet);
   }
 
   override hideObjects(objects: Object3D | Object3D[]): this {
-    const handles = super.getHandlesByObjects(objects);
+    const handles = this.getHandlesByObjects(objects);
     this.gltfLoader.hideObjects(handles);
     return this;
   }
 
   override isolateObjects(objects: Object3D | Object3D[]): this {
-    const handles = super.getHandlesByObjects(objects);
+    const handles = this.getHandlesByObjects(objects);
     this.gltfLoader.isolateObjects(new Set(handles));
     return this;
   }
 
   override showObjects(objects: Object3D | Object3D[]): this {
-    const handles = super.getHandlesByObjects(objects);
+    const handles = this.getHandlesByObjects(objects);
     this.gltfLoader.showObjects(handles);
     return this;
   }