@inweb/viewer-three 26.12.7 → 27.1.1

package/extensions/components/InfoPanelComponent.ts

@@ -107,9 +107,8 @@ class InfoPanelComponent implements IComponent {
     this.viewer.addEventListener("clear", this.updateSceneInfo);
     this.viewer.addEventListener("geometryend", this.updateSceneInfo);
     this.viewer.addEventListener("render", this.updateRenderInfo);
-    this.viewer.addEventListener("animate", this.updatePreformanceInfo);
+    this.viewer.addEventListener("animate", this.updateViewer);
 
-    this.updatePreformanceInfo();
     this.updateRenderInfo();
     this.updateSceneInfo();
   }
@@ -118,7 +117,7 @@ class InfoPanelComponent implements IComponent {
     this.viewer.removeEventListener("clear", this.updateSceneInfo);
     this.viewer.removeEventListener("geometryend", this.updateSceneInfo);
     this.viewer.removeEventListener("render", this.updateRenderInfo);
-    this.viewer.removeEventListener("animate", this.updatePreformanceInfo);
+    this.viewer.removeEventListener("animate", this.updateViewer);
 
     this.performancePanel = undefined;
     this.renderPanel = undefined;
@@ -141,7 +140,7 @@ class InfoPanelComponent implements IComponent {
     }
   }
 
-  updatePreformanceInfo = () => {
+  updateRenderInfo = () => {
     const info = this.viewer.info;
 
     const text = [];
@@ -149,13 +148,7 @@ class InfoPanelComponent implements IComponent {
     text.push(`Frame Time: ${info.performance.frameTime} ms`);
     this.performancePanel.update(text.join("\n"));
 
-    this.viewer.update();
-  };
-
-  updateRenderInfo = () => {
-    const info = this.viewer.info;
-
-    const text = [];
+    text.length = 0;
     text.push(`Viewport: ${info.render.viewport.width} x ${info.render.viewport.height}`);
     text.push(`Antialiasing: ${info.render.antialiasing}`);
     text.push(`Draw Calls: ${info.render.drawCalls}`);
@@ -192,6 +185,10 @@ class InfoPanelComponent implements IComponent {
     text.push(`JS Heap Used: ${formatBytes(info.memory.usedJSHeapSize)}`);
     this.memoryPanel.update(text.join("\n"));
   };
+
+  updateViewer = () => {
+    this.viewer.update();
+  };
 }
 
 components.registerComponent("InfoPanelComponent", (viewer) => new InfoPanelComponent(viewer));

package/extensions/loaders/GLTFCloudLoader.ts

@@ -65,9 +65,9 @@ class GLTFCloudLoader extends Loader {
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
-    this.viewer.update();
 
     this.viewer.emitEvent({ type: "databasechunk", data: gltf.scene, file: model.file, model });
+    this.viewer.update(true);
 
     return this;
   }

package/extensions/loaders/GLTFFileLoader.ts

@@ -76,9 +76,9 @@ export class GLTFFileLoader extends Loader {
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
-    this.viewer.update();
 
     this.viewer.emitEvent({ type: "databasechunk", data: gltf.scene, file });
+    this.viewer.update(true);
 
     return this;
   }

package/extensions/loaders/IFCX/IFCXCloudLoader.ts

@@ -70,9 +70,9 @@ export class IFCXCloudLoader extends Loader {
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
-    this.viewer.update();
 
     this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
+    this.viewer.update(true);
 
     return this;
   }

package/extensions/loaders/IFCX/IFCXFileLoader.ts

@@ -70,9 +70,9 @@ export class IFCXFileLoader extends Loader {
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
-    this.viewer.update();
 
     this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
+    this.viewer.update(true);
 
     return this;
   }

package/extensions/loaders/Potree/PotreeFileLoader.ts

@@ -91,9 +91,9 @@ export class PotreeFileLoader extends Loader {
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
-    this.viewer.update();
 
     this.viewer.emitEvent({ type: "databasechunk", data: pco, file });
+    this.viewer.update(true);
 
     return this;
   }

package/lib/Viewer/Viewer.d.ts

@@ -39,6 +39,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     target: Vector3;
     private _activeDragger;
     private _components;
+    private _updateDelay;
     private _renderNeeded;
     private _renderTime;
     private _markup;

package/lib/Viewer/commands/CreatePreview.d.ts

@@ -1,2 +1,2 @@
 import type { Viewer } from "../Viewer";
-export declare function createPreview(viewer: Viewer, type?: string, encoderOptions?: number): string;
+export declare function createPreview(viewer: Viewer, type?: string, quality?: number): string;

package/lib/Viewer/components/RenderLoopComponent.d.ts

@@ -5,5 +5,5 @@ export declare class RenderLoopComponent implements IComponent {
     protected requestId: number;
     constructor(viewer: Viewer);
     dispose(): void;
-    animate: (time?: number) => void;
+    animate: (time: number) => void;
 }

package/lib/Viewer/draggers/FlyDragger.d.ts

@@ -13,4 +13,5 @@ export declare class FlyDragger implements IDragger {
     flyspeedChange: (event: any) => void;
     viewerRender: () => void;
     viewerZoom: () => void;
+    animate: () => void;
 }

package/lib/Viewer/draggers/WalkDragger.d.ts

@@ -13,4 +13,5 @@ export declare class WalkDragger implements IDragger {
     walkspeedChange: (event: any) => void;
     viewerRender: () => void;
     viewerZoom: () => void;
+    animate: () => void;
 }

package/lib/Viewer/loaders/index.d.ts

@@ -59,11 +59,12 @@ import { ILoadersRegistry } from "@inweb/viewer-core";
  *
  *     this.viewer.syncOptions();
  *     this.viewer.syncOverlay();
- *     this.viewer.update();
  *
  *     this.viewer.emitEvent({ type: "geometryprogress", data: 1, file });
  *     this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
  *
+ *     this.viewer.update(true);
+ *
  *     return Promise.resove(this);
  *   };
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.12.7",
+  "version": "27.1.1",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.12.7",
-    "@inweb/eventemitter2": "~26.12.7",
-    "@inweb/markup": "~26.12.7",
-    "@inweb/viewer-core": "~26.12.7"
+    "@inweb/client": "~27.1.1",
+    "@inweb/eventemitter2": "~27.1.1",
+    "@inweb/markup": "~27.1.1",
+    "@inweb/viewer-core": "~27.1.1"
   },
   "devDependencies": {
     "@types/three": "^0.180.0",

package/src/Viewer/Viewer.ts

@@ -24,6 +24,7 @@
 import {
   Box3,
   LinearSRGBColorSpace,
+  // LinearToneMapping,
   Object3D,
   OrthographicCamera,
   PerspectiveCamera,
@@ -109,6 +110,7 @@ export class Viewer
   private _activeDragger: IDragger | null;
   private _components: IComponent[];
 
+  private _updateDelay: number;
   private _renderNeeded: boolean;
   private _renderTime: DOMHighResTimeStamp;
 
@@ -137,6 +139,7 @@ export class Viewer
     this._activeDragger = null;
     this._components = [];
 
+    this._updateDelay = 1000;
     this._renderNeeded = false;
     this._renderTime = 0;
 
@@ -193,20 +196,16 @@ export class Viewer
     });
     this.renderer.setPixelRatio(pixelRatio);
     this.renderer.setSize(width, height);
-    // this.renderer.toneMapping = LinearToneMapping;
     this.renderer.outputColorSpace = LinearSRGBColorSpace;
+    // this.renderer.toneMapping = LinearToneMapping;
 
     this.renderPass = new RenderPass(this.scene, this.camera);
-
     this.helpersPass = new RenderPass(this.helpers, this.camera);
     this.helpersPass.clear = false;
-
     this.fxaaPass = new FXAAPass();
     this.smaaPass = new SMAAPass();
-
     this.ssaaRenderPass = new SSAARenderPass([this.scene, this.helpers], this.camera);
     this.ssaaRenderPass.unbiased = true;
-
     this.outputPass = new OutputPass();
 
     this.composer = new EffectComposer(this.renderer);
@@ -231,13 +230,15 @@ export class Viewer
     this.syncOverlay();
 
     this._renderTime = performance.now();
-    this.render(this._renderTime);
 
-    if (typeof onProgress === "function")
-      onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded: 1, total: 1 }));
+    if (typeof onProgress === "function") {
+      const event = new ProgressEvent("progress", { lengthComputable: true, loaded: 1, total: 1 });
+      onProgress(event);
+    }
 
     this.emitEvent({ type: "initializeprogress", data: 1, loaded: 1, total: 1 });
     this.emitEvent({ type: "initialize" });
+    this.update(true);
 
     return Promise.resolve(this);
   }
@@ -308,14 +309,18 @@ export class Viewer
     this.renderer.setSize(width, height, updateStyle);
     this.composer.setSize(width, height);
 
-    this.update(true);
     this.emitEvent({ type: "resize", width, height });
+    this.update(true);
   }
 
   update(force = false): void {
+    const time = performance.now();
+    force = force || time - this._renderTime >= this._updateDelay;
+
     this._renderNeeded = true;
-    if (force) this.render();
-    this.emitEvent({ type: "update", data: force });
+    if (force) this.render(time);
+
+    this.emitEvent({ type: "update", force });
   }
 
   // Internal render routines
@@ -473,6 +478,7 @@ export class Viewer
       throw error;
     }
     this.emitEvent({ type: "geometryend", file, model });
+    this.update(true);
 
     return this;
   }
@@ -532,9 +538,9 @@ export class Viewer
 
     this.syncOptions();
     this.syncOverlay();
-    this.update(true);
 
     this.emitEvent({ type: "clear" });
+    this.update(true);
 
     return this;
   }
@@ -763,10 +769,10 @@ export class Viewer
     this.target.copy(getVector3FromPoint3d(viewpoint.custom_fields?.camera_target ?? this.target));
 
     this.syncOverlay();
-
     this.setActiveDragger(draggerName);
+
     this.emitEvent({ type: "drawviewpoint", data: viewpoint });
-    this.update();
+    this.update(true);
   }
 
   createViewpoint(): IViewpoint {
@@ -836,11 +842,7 @@ export class Viewer
   }
 
   // IWorldTransform
-  // ===================== AI-CODE-START ======================
-  // Source: Claude Sonnet 4.5
-  // Date: 2025-11-25
-  // Reviewer: vitaly.ivanov@opendesign.com
-  // Issue: CLOUD-5990
+
   screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
     if (!this.renderer) return { x: position.x, y: position.y, z: 0 };
 
@@ -848,6 +850,12 @@ export class Viewer
     const x = position.x / (rect.width / 2) - 1;
     const y = -position.y / (rect.height / 2) + 1;
 
+    // ===================== AI-CODE-START ======================
+    // Source: Claude Sonnet 4.5
+    // Date: 2025-11-25
+    // Reviewer: vitaly.ivanov@opendesign.com
+    // Issue: CLOUD-5990
+
     if (this.camera["isPerspectiveCamera"]) {
       // Create a raycaster from the screen position
       const raycaster = new Raycaster();
@@ -870,14 +878,15 @@ export class Viewer
         return { x: point.x, y: point.y, z: point.z };
       }
       return { x: intersectionPoint.x, y: intersectionPoint.y, z: intersectionPoint.z };
-    } else {
-      const point = new Vector3(x, y, -1);
-      point.unproject(this.camera);
-
-      return { x: point.x, y: point.y, z: point.z };
     }
+
+    // ===================== AI-CODE-END ======================
+
+    const point = new Vector3(x, y, -1);
+    point.unproject(this.camera);
+
+    return { x: point.x, y: point.y, z: point.z };
   }
-  // ===================== AI-CODE-END ======================
 
   worldToScreen(position: { x: number; y: number; z: number }): { x: number; y: number } {
     if (!this.renderer) return { x: position.x, y: position.y };

package/src/Viewer/commands/CreatePreview.ts

@@ -23,7 +23,7 @@
 
 import type { Viewer } from "../Viewer";
 
-export function createPreview(viewer: Viewer, type = "image/jpeg", encoderOptions = 0.25): string {
+export function createPreview(viewer: Viewer, type = "image/jpeg", quality = 0.25): string {
   viewer.update(true);
-  return viewer.canvas.toDataURL(type, encoderOptions);
+  return viewer.canvas.toDataURL(type, quality);
 }

package/src/Viewer/components/InfoComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { REVISION, Vector2 } from "three";
+import { REVISION } from "three";
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
@@ -159,9 +159,9 @@ export class InfoComponent implements IComponent {
   };
 
   resize = () => {
-    const rendererSize = this.viewer.renderer.getSize(new Vector2());
-    this.viewer.info.render.viewport.width = rendererSize.x;
-    this.viewer.info.render.viewport.height = rendererSize.y;
+    const { width, height } = this.viewer.canvas;
+    this.viewer.info.render.viewport.width = width;
+    this.viewer.info.render.viewport.height = height;
   };
 
   render = () => {

package/src/Viewer/components/RenderLoopComponent.ts

@@ -30,14 +30,14 @@ export class RenderLoopComponent implements IComponent {
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
-    this.animate();
+    this.requestId = requestAnimationFrame(this.animate);
   }
 
   dispose() {
     cancelAnimationFrame(this.requestId);
   }
 
-  animate = (time = 0) => {
+  animate = (time: number) => {
     this.requestId = requestAnimationFrame(this.animate);
 
     this.viewer.render(time);

package/src/Viewer/draggers/FlyDragger.ts

@@ -42,16 +42,20 @@ export class FlyDragger implements IDragger {
     this.joyStickControls.addEventListener("change", this.controlsChange);
 
     this.viewer = viewer;
+    this.viewer.addEventListener("animate", this.animate);
     this.viewer.addEventListener("render", this.viewerRender);
     this.viewer.addEventListener("zoom", this.viewerZoom);
     this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
+
     this.updateControls();
   }
 
   dispose() {
+    this.viewer.removeEventListener("animate", this.animate);
     this.viewer.removeEventListener("render", this.viewerRender);
     this.viewer.removeEventListener("zoom", this.viewerZoom);
     this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
+
     this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
     this.controls.removeEventListener("change", this.controlsChange);
     this.controls.dispose();
@@ -83,10 +87,13 @@ export class FlyDragger implements IDragger {
 
   viewerRender = () => {
     this.joyStickControls.update();
-    this.controls.update();
   };
 
   viewerZoom = () => {
     this.controls.rotateDelta.set(0, 0);
   };
+
+  animate = () => {
+    this.controls.update();
+  };
 }

package/src/Viewer/draggers/WalkDragger.ts

@@ -50,16 +50,20 @@ export class WalkDragger implements IDragger {
     this.joyStickControls.addEventListener("change", this.controlsChange);
 
     this.viewer = viewer;
+    this.viewer.addEventListener("animate", this.animate);
     this.viewer.addEventListener("render", this.viewerRender);
     this.viewer.addEventListener("zoom", this.viewerZoom);
     this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
+
     this.updateControls();
   }
 
   dispose() {
+    this.viewer.removeEventListener("animate", this.animate);
     this.viewer.removeEventListener("render", this.viewerRender);
     this.viewer.removeEventListener("zoom", this.viewerZoom);
     this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
+
     this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
     this.controls.removeEventListener("change", this.controlsChange);
     this.controls.dispose();
@@ -91,10 +95,13 @@ export class WalkDragger implements IDragger {
 
   viewerRender = () => {
     this.joyStickControls.update();
-    this.controls.update();
   };
 
   viewerZoom = () => {
     this.controls.rotateDelta.set(0, 0);
   };
+
+  animate = () => {
+    this.controls.update();
+  };
 }

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

@@ -77,9 +77,6 @@ export class DynamicGltfLoader {
     this.graphicsObjectLimit = 10000;
     this.totalLoadedObjects = 0;
 
-    this.lastUpdateTime = 0;
-    this.updateInterval = 1000;
-
     this.handleToObjects = new Map();
 
     this.originalObjects = new Set();
@@ -887,11 +884,7 @@ export class DynamicGltfLoader {
           total: totalNodes,
         });
 
-        const currentTime = Date.now();
-        if (currentTime - this.lastUpdateTime >= this.updateInterval) {
-          this.dispatchEvent("update");
-          this.lastUpdateTime = currentTime;
-        }
+        this.dispatchEvent("update");
 
         await new Promise((resolve) => {
           setTimeout(resolve, 0);
@@ -1284,7 +1277,6 @@ export class DynamicGltfLoader {
     this.transformedGeometries.clear();
 
     this.totalLoadedObjects = 0;
-    this.lastUpdateTime = 0;
     this.currentMemoryUsage = 0;
     this.loadedGeometrySize = 0;
 
@@ -1414,9 +1406,7 @@ export class DynamicGltfLoader {
 
   yieldToUI() {
     return new Promise((resolve) => {
-      requestAnimationFrame(() => {
-        setTimeout(resolve, 0);
-      });
+      setTimeout(resolve, 0);
     });
   }
 

package/src/Viewer/loaders/GLTFCloudDynamicLoader.ts

@@ -71,16 +71,16 @@ export class GLTFCloudDynamicLoader extends Loader {
 
       this.viewer.syncOptions();
       this.viewer.syncOverlay();
-      this.viewer.update();
 
       this.viewer.emitEvent({ type: "databasechunk", data: scene, file: model.file, model });
+      this.viewer.update(true);
     });
 
     this.gltfLoader.addEventListener("geometryerror", (data) => {
       this.viewer.emitEvent({ type: "geometryerror", data, file: model.file, model });
     });
 
-    this.gltfLoader.addEventListener("update", (data) => {
+    this.gltfLoader.addEventListener("update", () => {
       this.viewer.update();
     });
 

package/src/Viewer/loaders/GLTFFileDynamicLoader.ts

@@ -75,16 +75,16 @@ export class GLTFFileDynamicLoader extends Loader {
 
       this.viewer.syncOptions();
       this.viewer.syncOverlay();
-      this.viewer.update();
 
       this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
+      this.viewer.update(true);
     });
 
     this.gltfLoader.addEventListener("geometryerror", (data) => {
       this.viewer.emitEvent({ type: "geometryerror", data, file });
     });
 
-    this.gltfLoader.addEventListener("update", (data) => {
+    this.gltfLoader.addEventListener("update", () => {
       this.viewer.update();
     });
 

package/src/Viewer/loaders/index.ts

@@ -86,11 +86,12 @@ import { GLTFCloudDynamicLoader } from "./GLTFCloudDynamicLoader";
  *
  *     this.viewer.syncOptions();
  *     this.viewer.syncOverlay();
- *     this.viewer.update();
  *
  *     this.viewer.emitEvent({ type: "geometryprogress", data: 1, file });
  *     this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
  *
+ *     this.viewer.update(true);
+ *
  *     return Promise.resove(this);
  *   };
  *