@inweb/viewer-three 26.8.1 → 26.8.2

package/src/Viewer/components/HighlighterComponent.ts

@@ -22,7 +22,6 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import {
-  Color,
   EdgesGeometry,
   LineBasicMaterial,
   MeshPhongMaterial,
@@ -43,10 +42,10 @@ import { HighlighterUtils } from "./HighlighterUtils";
 export class HighlighterComponent implements IComponent {
   protected viewer: Viewer;
   public renderTarget: WebGLRenderTarget;
-  public highlightMaterial: MeshPhongMaterial;
-  public outlineMaterial: LineMaterial;
-  public highlightLineMaterial: LineBasicMaterial;
-  public highlightLineGlowMaterial: LineMaterial;
+  public facesMaterial: MeshPhongMaterial;
+  public edgesMaterial: LineMaterial;
+  public lineMaterial: LineBasicMaterial;
+  public lineGlowMaterial: LineMaterial;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
@@ -81,46 +80,48 @@ export class HighlighterComponent implements IComponent {
     if (!Array.isArray(objects)) objects = [objects];
     if (!objects.length) return;
 
-    objects.forEach((object: any) => {
-      if (object.isHighlighted) return;
-
-      if (object.isLine || object.isLineSegments) {
-        const positions = object.geometry.attributes.position.array;
-        const indices = object.geometry.index ? object.geometry.index.array : null;
-        const lineGeometry = indices
-          ? HighlighterUtils.fromIndexedLine(positions, indices)
-          : HighlighterUtils.fromNonIndexedLine(positions, object.isLineSegments);
-
-        const wireframe = new Wireframe(lineGeometry, this.highlightLineGlowMaterial);
-        wireframe.position.copy(object.position);
-        wireframe.rotation.copy(object.rotation);
-        wireframe.scale.copy(object.scale);
-        wireframe.visible = edgesVisibility;
-
-        object.parent.add(wireframe);
-        object.userData.highlightWireframe = wireframe;
-
-        object.userData.originalMaterial = object.material;
-        object.material = this.highlightLineMaterial;
-        object.isHighlighted = true;
-      } else if (object.isMesh) {
-        const edgesGeometry = new EdgesGeometry(object.geometry, 60);
-        const lineGeometry = new LineSegmentsGeometry().fromEdgesGeometry(edgesGeometry);
-
-        const wireframe = new Wireframe(lineGeometry, this.outlineMaterial);
-        wireframe.position.copy(object.position);
-        wireframe.rotation.copy(object.rotation);
-        wireframe.scale.copy(object.scale);
-        wireframe.visible = edgesVisibility;
-
-        object.parent.add(wireframe);
-        object.userData.highlightWireframe = wireframe;
-
-        object.userData.originalMaterial = object.material;
-        object.material = this.highlightMaterial;
-        object.isHighlighted = true;
-      }
-    });
+    objects
+      .filter((object) => !object.userData.isEdge) // <- filtering server generated edges
+      .forEach((object: any) => {
+        if (object.isHighlighted) return;
+
+        if (object.isLine || object.isLineSegments) {
+          const positions = object.geometry.attributes.position.array;
+          const indices = object.geometry.index ? object.geometry.index.array : null;
+          const lineGeometry = indices
+            ? HighlighterUtils.fromIndexedLine(positions, indices)
+            : HighlighterUtils.fromNonIndexedLine(positions, object.isLineSegments);
+
+          const wireframe = new Wireframe(lineGeometry, this.lineGlowMaterial);
+          wireframe.position.copy(object.position);
+          wireframe.rotation.copy(object.rotation);
+          wireframe.scale.copy(object.scale);
+          wireframe.visible = edgesVisibility;
+
+          object.parent.add(wireframe);
+          object.userData.highlightWireframe = wireframe;
+
+          object.userData.originalMaterial = object.material;
+          object.material = this.lineMaterial;
+          object.isHighlighted = true;
+        } else if (object.isMesh) {
+          const edgesGeometry = new EdgesGeometry(object.geometry, 89);
+          const lineGeometry = new LineSegmentsGeometry().fromEdgesGeometry(edgesGeometry);
+
+          const wireframe = new Wireframe(lineGeometry, this.edgesMaterial);
+          wireframe.position.copy(object.position);
+          wireframe.rotation.copy(object.rotation);
+          wireframe.scale.copy(object.scale);
+          wireframe.visible = edgesVisibility;
+
+          object.parent.add(wireframe);
+          object.userData.highlightWireframe = wireframe;
+
+          object.userData.originalMaterial = object.material;
+          object.material = this.facesMaterial;
+          object.isHighlighted = true;
+        }
+      });
   }
 
   unhighlight(objects: Object3D | Object3D[]) {
@@ -140,14 +141,8 @@ export class HighlighterComponent implements IComponent {
   }
 
   geometryEnd = () => {
-    const { facesColor, facesTransparancy, edgesColor, edgesOverlap, facesOverlap } = this.viewer.options;
-
-    this.highlightMaterial = new MeshPhongMaterial({
-      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+    this.facesMaterial = new MeshPhongMaterial({
       transparent: true,
-      opacity: (255 - facesTransparancy) / 255,
-      depthTest: !facesOverlap,
-      depthWrite: !facesOverlap,
       specular: 0x222222,
       shininess: 10,
       reflectivity: 0.05,
@@ -156,57 +151,60 @@ export class HighlighterComponent implements IComponent {
       polygonOffsetUnits: 1,
     });
 
-    this.outlineMaterial = new LineMaterial({
-      color: new Color(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255),
+    this.edgesMaterial = new LineMaterial({
       linewidth: 1.5,
-      depthTest: !edgesOverlap,
-      depthWrite: !edgesOverlap,
       resolution: new Vector2(window.innerWidth, window.innerHeight),
     });
 
-    this.highlightLineMaterial = new LineBasicMaterial({
-      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
-      depthTest: false,
-      depthWrite: false,
+    this.lineMaterial = new LineBasicMaterial({
+      transparent: true,
+      depthTest: true,
+      depthWrite: true,
     });
 
-    this.highlightLineGlowMaterial = new LineMaterial({
-      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
-      linewidth: 5,
+    this.lineGlowMaterial = new LineMaterial({
+      linewidth: 1.5,
       transparent: true,
       opacity: 0.8,
-      depthTest: !edgesOverlap,
-      depthWrite: !edgesOverlap,
       resolution: new Vector2(window.innerWidth, window.innerHeight),
     });
+
+    this.syncHighlightColors();
   };
 
   optionsChange = () => {
-    const { facesColor, facesTransparancy, edgesColor, edgesVisibility, edgesOverlap, facesOverlap } =
-      this.viewer.options;
+    this.syncHighlightColors();
+    this.viewer.update();
+  };
+
+  syncHighlightColors() {
+    const { facesColor, facesTransparancy, facesOverlap } = this.viewer.options;
+    const { edgesColor, edgesVisibility, edgesOverlap } = this.viewer.options;
 
-    this.highlightMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-    this.highlightMaterial.opacity = (255 - facesTransparancy) / 255;
-    this.highlightMaterial.depthTest = !facesOverlap;
-    this.highlightMaterial.depthWrite = !facesOverlap;
+    this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
+    this.facesMaterial.depthTest = !facesOverlap;
+    this.facesMaterial.depthWrite = !facesOverlap;
 
-    this.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
-    this.outlineMaterial.depthTest = !edgesOverlap;
-    this.outlineMaterial.depthWrite = !edgesOverlap;
+    this.edgesMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+    this.edgesMaterial.depthTest = !edgesOverlap;
+    this.edgesMaterial.depthWrite = !edgesOverlap;
 
-    this.highlightLineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-    this.highlightLineGlowMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.lineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+
+    this.lineGlowMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+    this.lineGlowMaterial.depthTest = !edgesOverlap;
+    this.lineGlowMaterial.depthWrite = !edgesOverlap;
 
     this.viewer.selected.forEach((selected) => {
       const wireframe = selected.userData.highlightWireframe;
       if (wireframe) wireframe.visible = edgesVisibility;
     });
-
-    this.viewer.update();
-  };
+  }
 
   viewerResize(event: ResizeEvent) {
     this.renderTarget?.setSize(event.width, event.height);
-    this.outlineMaterial?.resolution.set(event.width, event.height);
+    this.edgesMaterial?.resolution.set(event.width, event.height);
+    this.lineGlowMaterial?.resolution.set(event.width, event.height);
   }
 }

package/src/Viewer/components/LightComponent.ts

@@ -36,7 +36,7 @@ export class LightComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.viewer = viewer;
 
-    this.ambientLight = new AmbientLight(0xffffff, 1.0);
+    this.ambientLight = new AmbientLight(0xffffff, 1.5);
     this.directionalLight = new DirectionalLight(0xffffff, 1.0);
     this.frontLight = new DirectionalLight(0xffffff, 1.25);
     this.hemisphereLight = new HemisphereLight(0xffffff, 0x444444, 1.25);

package/src/Viewer/components/ResizeCanvasComponent.ts

@@ -57,6 +57,7 @@ export class ResizeCanvasComponent implements IComponent {
     }
 
     this.viewer.renderer.setSize(width, height, true);
+    this.viewer.composer.setSize(width, height);
 
     this.viewer.update(true);
     this.viewer.emitEvent({ type: "resize", width, height });

package/src/Viewer/components/SelectionComponent.ts

@@ -25,7 +25,7 @@ import { Intersection, Object3D, Raycaster, Vector2 } from "three";
 
 import type { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
-import type { IModelImpl } from "../model";
+import type { IModelImpl } from "../models/IModelImpl";
 import type { HighlighterComponent } from "./HighlighterComponent";
 
 export class SelectionComponent implements IComponent {

package/src/Viewer/helpers/WCSHelper.ts

@@ -105,15 +105,18 @@ export class WCSHelper extends Object3D {
     this.quaternion.copy(this.camera.quaternion).invert();
     this.updateMatrixWorld();
 
-    const clippingPlanes = renderer.clippingPlanes;
-    const viewport = renderer.getViewport(new Vector4());
+    const oldAutoClear = renderer.autoClear;
+    const oldClippingPlanes = renderer.clippingPlanes;
+    const oldViewport = renderer.getViewport(new Vector4());
 
-    renderer.setViewport(this.position.x, this.position.y, this.size, this.size);
+    renderer.autoClear = false;
     renderer.clippingPlanes = [];
+    renderer.setViewport(this.position.x, this.position.y, this.size, this.size);
     renderer.clearDepth();
     renderer.render(this, this.orthoCamera);
 
-    renderer.setViewport(viewport);
-    renderer.clippingPlanes = clippingPlanes;
+    renderer.setViewport(oldViewport);
+    renderer.clippingPlanes = oldClippingPlanes;
+    renderer.autoClear = oldAutoClear;
   }
 }

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

@@ -1,7 +1,6 @@
 import {
   BufferGeometry,
   PointsMaterial,
-  Material,
   Points,
   Mesh,
   TriangleStripDrawMode,
@@ -14,7 +13,7 @@ import {
   Quaternion,
   Matrix4,
   Box3,
-  MeshStandardMaterial,
+  MeshPhongMaterial,
   Color,
   MathUtils,
   PerspectiveCamera,
@@ -369,19 +368,19 @@ export class DynamicGltfLoader {
 
         let material;
         if (primitive.material !== undefined) {
-          material = node.structure.materials.get(primitive.material) || this.createDefaultMaterial();
+          material = node.structure.getCachedMaterial(primitive.material, primitive.mode);
+
+          if (!material) {
+            const materialDef = node.structure.json.materials[primitive.material];
+            material = node.structure.createMaterial(materialDef, primitive.mode);
+          }
         } else {
-          material = this.createDefaultMaterial();
+          material = this.createDefaultMaterial(primitive.mode);
         }
 
         let mesh;
         if (primitive.mode === GL_CONSTANTS.POINTS) {
-          const pointsMaterial = new PointsMaterial();
-          Material.prototype.copy.call(pointsMaterial, material);
-          pointsMaterial.color.copy(material.color);
-          pointsMaterial.map = material.map;
-          pointsMaterial.sizeAttenuation = false;
-          mesh = new Points(geometry, pointsMaterial);
+          mesh = new Points(geometry, material);
         } else if (
           primitive.mode === GL_CONSTANTS.TRIANGLES ||
           primitive.mode === GL_CONSTANTS.TRIANGLE_STRIP ||
@@ -660,6 +659,10 @@ export class DynamicGltfLoader {
         this.edgeNodes.push(uniqueNodeId);
       }
 
+      if (meshDef.extras && meshDef.extras.handle) {
+        handle = `${structure.id}_${meshDef.extras.handle}`;
+      }
+
       this.nodes.set(uniqueNodeId, {
         position: nodeGroup ? nodeGroup.position.clone() : new Vector3().setFromMatrixPosition(nodeMatrix),
         nodeIndex: nodeId,
@@ -780,12 +783,12 @@ export class DynamicGltfLoader {
     });
   }
 
-  createDefaultMaterial() {
-    if (this.currentPrimitiveMode === GL_CONSTANTS.POINTS) {
+  createDefaultMaterial(primitiveMode = undefined) {
+    if (primitiveMode === GL_CONSTANTS.POINTS) {
       return new PointsMaterial({
         color: new Color(0x808080),
         size: 0.05,
-        sizeAttenuation: true,
+        sizeAttenuation: false,
         alphaTest: 0.5,
         transparent: true,
         vertexColors: false,
@@ -793,11 +796,25 @@ export class DynamicGltfLoader {
         depthWrite: false,
         depthTest: true,
       });
+    } else if (
+      primitiveMode === GL_CONSTANTS.LINES ||
+      primitiveMode === GL_CONSTANTS.LINE_STRIP ||
+      primitiveMode === GL_CONSTANTS.LINE_LOOP
+    ) {
+      return new LineBasicMaterial({
+        color: 0x808080,
+        linewidth: 1.0,
+        alphaTest: 0.1,
+        depthTest: true,
+        depthWrite: true,
+        transparent: true,
+        opacity: 1.0,
+      });
     } else {
-      return new MeshStandardMaterial({
+      return new MeshPhongMaterial({
         color: 0x808080,
-        metalness: 0.0,
-        roughness: 1.0,
+        specular: 0x222222,
+        shininess: 10,
         side: DoubleSide,
       });
     }

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

@@ -23,13 +23,14 @@
 
 import { Box3, Object3D } from "three";
 
-import { ModelImpl } from "../../model";
+import { ModelImpl } from "../../models/ModelImpl";
 import { DynamicGltfLoader } from "./DynamicGltfLoader.js";
 
 // Dynamic model implementation.
 
 export class DynamicModelImpl extends ModelImpl {
   public gltfLoader: DynamicGltfLoader;
+  public modelId: number;
 
   override getExtents(target: Box3): Box3 {
     return target.union(this.gltfLoader.getTotalGeometryExtent());
@@ -55,26 +56,32 @@ export class DynamicModelImpl extends ModelImpl {
     const handlesSet = new Set(handles);
     const objects = [];
     handlesSet.forEach((handle) => {
-      const handles = this.gltfLoader.handleToObjects.get(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));
     });
     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
+  }
+
   override hideObjects(objects: Object3D | Object3D[]): this {
-    const handles = this.getHandlesByObjects(objects);
+    const handles = super.getHandlesByObjects(objects);
     this.gltfLoader.hideObjects(handles);
     return this;
   }
 
   override isolateObjects(objects: Object3D | Object3D[]): this {
-    const handles = this.getHandlesByObjects(objects);
+    const handles = super.getHandlesByObjects(objects);
     this.gltfLoader.isolateObjects(new Set(handles));
     return this;
   }
 
   override showObjects(objects: Object3D | Object3D[]): this {
-    const handles = this.getHandlesByObjects(objects);
+    const handles = super.getHandlesByObjects(objects);
     this.gltfLoader.showObjects(handles);
     return this;
   }

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

@@ -1,4 +1,12 @@
-import { TextureLoader, BufferAttribute, Color, DoubleSide, MeshPhongMaterial } from "three";
+import {
+  TextureLoader,
+  BufferAttribute,
+  Color,
+  DoubleSide,
+  MeshPhongMaterial,
+  PointsMaterial,
+  LineBasicMaterial,
+} from "three";
 
 export const GL_COMPONENT_TYPES = {
   5120: Int8Array,
@@ -48,6 +56,7 @@ export class GltfStructure {
     this.textureLoader = new TextureLoader();
     this.materials = new Map();
     this.textureCache = new Map();
+    this.materialCache = new Map();
   }
 
   async initialize(loadController) {
@@ -346,19 +355,29 @@ export class GltfStructure {
     await Promise.all(texturePromises);
   }
 
-  async loadMaterials() {
+  loadMaterials() {
     if (!this.json.materials) return this.materials;
 
     for (let i = 0; i < this.json.materials.length; i++) {
       const materialDef = this.json.materials[i];
-      const material = await this.createMaterial(materialDef);
-      material.name = materialDef.name;
-      this.materials.set(i, material);
+
+      const materialCacheKey = `material_${i}`;
+      this.materialCache.set(materialCacheKey, {
+        mesh: this.createMaterial(materialDef, GL_CONSTANTS.TRIANGLES),
+        points: this.createMaterial(materialDef, GL_CONSTANTS.POINTS),
+        lines: this.createMaterial(materialDef, GL_CONSTANTS.LINES),
+      });
+
+      this.materialCache.get(materialCacheKey).mesh.name = materialDef.name;
+      this.materialCache.get(materialCacheKey).points.name = materialDef.name;
+      this.materialCache.get(materialCacheKey).lines.name = materialDef.name;
+
+      this.materials.set(i, this.materialCache.get(materialCacheKey).mesh);
     }
     return this.materials;
   }
 
-  createMaterial(materialDef) {
+  createMaterial(materialDef, primitiveMode = undefined) {
     const params = {};
 
     if (materialDef.pbrMetallicRoughness) {
@@ -373,21 +392,10 @@ export class GltfStructure {
       }
     }
 
-    params.specular = 0x222222;
-    params.shininess = 10;
-    params.reflectivity = 0.05;
-    params.polygonOffset = true;
-    params.polygonOffsetFactor = 1;
-    params.polygonOffsetUnits = 1;
-
     if (materialDef.emissiveFactor) {
       params.emissive = new Color().fromArray(materialDef.emissiveFactor);
     }
 
-    if (materialDef.normalTexture) {
-      params.normalMap = this.textureCache.get(materialDef.normalTexture.index);
-    }
-
     if (materialDef.alphaMode === "BLEND") {
       params.transparent = true;
     }
@@ -395,16 +403,61 @@ export class GltfStructure {
     if (materialDef.doubleSided) {
       params.side = DoubleSide;
     }
-    const material = new MeshPhongMaterial(params);
+    let material;
+
+    if (primitiveMode === GL_CONSTANTS.POINTS) {
+      params.sizeAttenuation = false;
+      material = new PointsMaterial(params);
+      material.sizeAttenuation = false;
+    } else if (
+      primitiveMode === GL_CONSTANTS.LINES ||
+      primitiveMode === GL_CONSTANTS.LINE_STRIP ||
+      primitiveMode === GL_CONSTANTS.LINE_LOOP
+    ) {
+      material = new LineBasicMaterial(params);
+    } else {
+      params.specular = 0x222222;
+      params.shininess = 10;
+      params.reflectivity = 0.05;
+      params.polygonOffset = true;
+      params.polygonOffsetFactor = 1;
+      params.polygonOffsetUnits = 1;
+
+      if (materialDef.normalTexture) {
+        params.normalMap = this.textureCache.get(materialDef.normalTexture.index);
+      }
+
+      material = new MeshPhongMaterial(params);
+    }
+
     return material;
   }
 
+  getCachedMaterial(materialIndex, primitiveMode) {
+    const materialCacheKey = `material_${materialIndex}`;
+    const materialCache = this.materialCache.get(materialCacheKey);
+
+    if (materialCache) {
+      if (primitiveMode === GL_CONSTANTS.POINTS) {
+        return materialCache.points;
+      } else if (
+        primitiveMode === GL_CONSTANTS.LINES ||
+        primitiveMode === GL_CONSTANTS.LINE_STRIP ||
+        primitiveMode === GL_CONSTANTS.LINE_LOOP
+      ) {
+        return materialCache.lines;
+      } else {
+        return materialCache.mesh;
+      }
+    }
+
+    return null;
+  }
+
   disposeMaterials() {
-    // Dispose all textures
     this.textureCache.forEach((texture) => texture.dispose());
     this.textureCache.clear();
 
-    // Dispose all materials
     this.materials.forEach((material) => {
       if (material.map) material.map.dispose();
       if (material.lightMap) material.lightMap.dispose();
@@ -419,6 +472,33 @@ export class GltfStructure {
       material.dispose();
     });
     this.materials.clear();
+
+    this.materialCache.forEach((materialCache) => {
+      if (materialCache.mesh) {
+        if (materialCache.mesh.map) materialCache.mesh.map.dispose();
+        if (materialCache.mesh.lightMap) materialCache.mesh.lightMap.dispose();
+        if (materialCache.mesh.bumpMap) materialCache.mesh.bumpMap.dispose();
+        if (materialCache.mesh.normalMap) materialCache.mesh.normalMap.dispose();
+        if (materialCache.mesh.specularMap) materialCache.mesh.specularMap.dispose();
+        if (materialCache.mesh.envMap) materialCache.mesh.envMap.dispose();
+        if (materialCache.mesh.aoMap) materialCache.mesh.aoMap.dispose();
+        if (materialCache.mesh.metalnessMap) materialCache.mesh.metalnessMap.dispose();
+        if (materialCache.mesh.roughnessMap) materialCache.mesh.roughnessMap.dispose();
+        if (materialCache.mesh.emissiveMap) materialCache.mesh.emissiveMap.dispose();
+        materialCache.mesh.dispose();
+      }
+
+      if (materialCache.points) {
+        if (materialCache.points.map) materialCache.points.map.dispose();
+        materialCache.points.dispose();
+      }
+
+      if (materialCache.lines) {
+        if (materialCache.lines.map) materialCache.lines.map.dispose();
+        materialCache.lines.dispose();
+      }
+    });
+    this.materialCache.clear();
   }
 
   estimateNodeSize(meshIndex) {

package/src/Viewer/loaders/GLTFCloudDynamicLoader.ts

@@ -57,12 +57,14 @@ export class GLTFCloudDynamicLoader implements ILoader {
 
     this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
     this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
+    this.gltfLoader.setVisibleEdges(this.viewer.options.edgeModel);
 
     this.gltfLoader.addEventListener("databasechunk", (data) => {
       const modelImpl = new DynamicModelImpl(scene);
       modelImpl.loader = this;
-      modelImpl.gltfLoader = this.gltfLoader;
       modelImpl.viewer = this.viewer;
+      modelImpl.gltfLoader = this.gltfLoader;
+      modelImpl.modelId = model.id;
 
       this.viewer.scene.add(scene);
       this.viewer.models.push(modelImpl);
@@ -124,7 +126,7 @@ export class GLTFCloudDynamicLoader implements ILoader {
       baseUrl: () => Promise.resolve(`${model.httpClient.serverUrl}${model.path}/`),
     };
 
-    const structure = new GltfStructure(1);
+    const structure = new GltfStructure(model.id);
     await structure.initialize(loadController);
 
     await this.gltfLoader.loadStructure(structure);

package/src/Viewer/loaders/GLTFFileLoader.ts

@@ -26,7 +26,7 @@ import { Loader } from "@inweb/viewer-core";
 
 import { Viewer } from "../Viewer";
 import { GLTFLoadingManager, GLTFLoadParams } from "./GLTFLoadingManager";
-import { ModelImpl } from "../model/ModelImpl";
+import { ModelImpl } from "../models/ModelImpl";
 
 export class GLTFFileLoader extends Loader {
   public viewer: Viewer;