@inweb/viewer-three 27.1.0 → 27.1.2

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/LightComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { AmbientLight, DirectionalLight, HemisphereLight, Quaternion, Sphere, Vector3 } from "three";
+import { AmbientLight, DirectionalLight, HemisphereLight, Quaternion, Vector3 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -71,7 +71,7 @@ export class LightComponent implements IComponent {
     if (this.viewer.extents.isEmpty()) return;
 
     const extentsCenter = this.viewer.extents.getCenter(new Vector3());
-    const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius;
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
 
     const upY = new Vector3(0, 1, 0);
     const frontY = new Vector3(0, 0, -1);
@@ -83,19 +83,16 @@ export class LightComponent implements IComponent {
     this.directionalLight.position
       .copy(up)
       .applyAxisAngle(front, (-Math.PI * 30) / 180)
-      .multiplyScalar(extentsSize * 2)
+      .multiplyScalar(extentsSize)
       .add(extentsCenter);
     this.directionalLight.target.position.copy(extentsCenter);
 
-    this.frontLight.position
-      .copy(front)
-      .multiplyScalar(extentsSize * 2)
-      .add(extentsCenter);
+    this.frontLight.position.copy(front).multiplyScalar(extentsSize).add(extentsCenter);
     this.frontLight.target.position.copy(extentsCenter);
 
     this.hemisphereLight.position
       .copy(front)
-      .multiplyScalar(extentsSize * 3)
+      .multiplyScalar(extentsSize * 1.5)
       .add(extentsCenter);
 
     this.viewer.scene.add(this.ambientLight);

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/components/SelectionComponent.ts

@@ -63,8 +63,10 @@ export class SelectionComponent implements IComponent {
     const upPosition = this.getMousePosition(event, new Vector2());
     if (upPosition.distanceTo(this.downPosition) !== 0) return;
 
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+
     const snapper = new Snapper(this.viewer.camera, this.viewer.renderer, this.viewer.canvas);
-    snapper.threshold = this.viewer.extents.getSize(new Vector3()).length() / 10000;
+    snapper.threshold = extentsSize / 10000;
 
     let intersections = [];
     this.viewer.models.forEach((model) => {

package/src/Viewer/draggers/CuttingPlaneDragger.ts

@@ -37,20 +37,20 @@ export class CuttingPlaneDragger extends OrbitDragger {
   constructor(viewer: Viewer, normal: Vector3, color: number) {
     super(viewer);
 
-    const size = viewer.extents.getSize(new Vector3()).length();
-    const center = viewer.extents.getCenter(new Vector3());
-    const constant = -center.dot(normal);
+    const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
+    const extentsCenter = viewer.extents.getCenter(new Vector3());
+    const constant = -extentsCenter.dot(normal);
 
     this.plane = new Plane(normal, constant);
 
     if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
     viewer.renderer.clippingPlanes.push(this.plane);
 
-    this.planeHelper = new PlaneHelper(this.plane, size, color, center);
+    this.planeHelper = new PlaneHelper(this.plane, extentsSize, color, extentsCenter);
     this.viewer.helpers.add(this.planeHelper);
 
     this.planeCenter = new Object3D();
-    this.planeCenter.position.copy(viewer.extents.getCenter(new Vector3()));
+    this.planeCenter.position.copy(extentsCenter);
     this.viewer.helpers.add(this.planeCenter);
 
     this.transform = new TransformControls(viewer.camera, viewer.canvas);
@@ -104,7 +104,7 @@ export class CuttingPlaneDragger extends OrbitDragger {
   };
 
   updatePlaneSize = () => {
-    this.planeHelper.size = this.viewer.extents.getSize(new Vector3()).length();
+    this.planeHelper.size = this.viewer.extents.getSize(new Vector3()).length() || 1;
     this.viewer.update();
   };
 

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();
@@ -62,7 +66,7 @@ export class FlyDragger implements IDragger {
 
   updateControls = () => {
     const size = this.viewer.extents.getSize(new Vector3());
-    this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+    this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2 || 1;
     this.joyStickControls.movementSpeed = this.controls.movementSpeed;
     this.joyStickControls.multiplier = this.controls.multiplier;
   };
@@ -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/MeasureLineDragger.ts

@@ -49,8 +49,10 @@ export class MeasureLineDragger extends OrbitDragger {
     this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
     this.overlay.addLine(this.line);
 
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+
     this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
-    this.snapper.threshold = viewer.extents.getSize(new Vector3()).length() / 10000;
+    this.snapper.threshold = extentsSize / 10000;
 
     this.objects = [];
     this.updateObjects();
@@ -170,7 +172,10 @@ export class MeasureLineDragger extends OrbitDragger {
     const units = this.viewer.options.rulerUnit ?? "Default";
     const precision = this.viewer.options.rulerPrecision ?? "Default";
 
-    if (units === "Default") {
+    if (!model) {
+      this.scale = 1;
+      this.units = "";
+    } else if (units === "Default") {
       this.scale = model.getUnitScale();
       this.units = model.getUnitString();
     } else {
@@ -178,11 +183,9 @@ export class MeasureLineDragger extends OrbitDragger {
       this.units = units;
     }
 
-    if (precision === "Default") {
-      this.precision = model.getPrecision();
-    } else {
-      this.precision = precision;
-    }
+    if (!model) this.precision = 2;
+    else if (precision === "Default") this.precision = model.getPrecision();
+    else this.precision = precision;
 
     this.overlay.updateLineUnits(this.scale, this.units, this.precision);
   };

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();
@@ -70,7 +74,7 @@ export class WalkDragger implements IDragger {
 
   updateControls = () => {
     const size = this.viewer.extents.getSize(new Vector3());
-    this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+    this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2 || 1;
     this.joyStickControls.movementSpeed = this.controls.movementSpeed;
     this.joyStickControls.multiplier = this.controls.multiplier;
   };
@@ -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/GltfStructure.js

@@ -64,7 +64,13 @@ export class GltfStructure {
   }
 
   async initialize(loader) {
-    this.json = await this.loadController.loadJson();
+    const json = await this.loadController.loadJson();
+
+    if (json.asset === undefined || json.asset.version[0] < 2) {
+      throw new Error("GltfStructure: Unsupported asset. glTF versions >=2.0 are supported.");
+    }
+
+    this.json = json;
     this.loader = loader;
     this.uri = this.json.buffers[0].uri || "";
   }

package/src/Viewer/loaders/{GLTFBinaryExtension.ts → GLTFBinaryParser.ts}

@@ -31,61 +31,66 @@
 
 const BINARY_EXTENSION_HEADER_MAGIC = "glTF";
 const BINARY_EXTENSION_HEADER_LENGTH = 12;
-const BINARY_EXTENSION_CHUNK_TYPES = { JSON: 0x4e4f534a, BIN: 0x004e4042 };
+const BINARY_EXTENSION_CHUNK_TYPES = { JSON: 0x4e4f534a, BIN: 0x004e4942 };
 
-export class GLTFBinaryExtension {
-  public content: string;
+export interface GLTFBinaryHeader {
+  magic: string;
+  version: number;
+  length: number;
+}
+
+export class GLTFBinaryParser {
+  public header: GLTFBinaryHeader;
+  public content: Uint8Array;
   public body: ArrayBuffer;
 
   constructor(data: ArrayBuffer) {
-    const headerView = new DataView(data, 0, BINARY_EXTENSION_HEADER_LENGTH);
-    const textDecoder = new TextDecoder();
+    const dataView = new DataView(data, 0);
 
-    const magic = textDecoder.decode(new Uint8Array(data.slice(0, 4)));
+    const textDecoder = new TextDecoder();
+    const magic = textDecoder.decode(new Uint8Array(data, 0, Math.min(4, data.byteLength)));
 
     if (magic !== BINARY_EXTENSION_HEADER_MAGIC) {
-      this.content = textDecoder.decode(data);
+      this.content = new Uint8Array(data);
       return;
     }
 
-    const header = {
+    this.header = {
       magic,
-      version: headerView.getUint32(4, true),
-      length: headerView.getUint32(8, true),
+      version: dataView.getUint32(4, true),
+      length: dataView.getUint32(8, true),
     };
 
-    if (header.magic !== BINARY_EXTENSION_HEADER_MAGIC) {
-      throw new Error("Unsupported glTF-Binary header.");
+    if (this.header.length !== data.byteLength) {
+      throw new Error("GLTFBinaryParser: Invalid binary file header.");
     }
-
-    if (header.version < 2.0) {
-      throw new Error("Legacy binary file detected.");
+    if (this.header.version < 2.0) {
+      throw new Error("GLTFBinaryParser: Legacy binary file detected.");
     }
 
-    const chunkContentsLength = header.length - BINARY_EXTENSION_HEADER_LENGTH;
-    const chunkView = new DataView(data, BINARY_EXTENSION_HEADER_LENGTH);
-    let chunkIndex = 0;
+    let offset = BINARY_EXTENSION_HEADER_LENGTH;
 
-    while (chunkIndex < chunkContentsLength) {
-      const chunkLength = chunkView.getUint32(chunkIndex, true);
-      chunkIndex += 4;
+    while (offset < this.header.length) {
+      const chunkLength = dataView.getUint32(offset, true);
+      offset += 4;
 
-      const chunkType = chunkView.getUint32(chunkIndex, true);
-      chunkIndex += 4;
+      const chunkType = dataView.getUint32(offset, true);
+      offset += 4;
 
       if (chunkType === BINARY_EXTENSION_CHUNK_TYPES.JSON) {
-        const contentArray = new Uint8Array(data, BINARY_EXTENSION_HEADER_LENGTH + chunkIndex, chunkLength);
-        this.content = textDecoder.decode(contentArray);
+        this.content = new Uint8Array(data, offset, chunkLength);
       } else if (chunkType === BINARY_EXTENSION_CHUNK_TYPES.BIN) {
-        const byteOffset = BINARY_EXTENSION_HEADER_LENGTH + chunkIndex;
-        this.body = data.slice(byteOffset, byteOffset + chunkLength);
+        this.body = data.slice(offset, offset + chunkLength);
       }
 
-      chunkIndex += chunkLength;
+      offset += chunkLength;
     }
 
     if (typeof this.content === "undefined") {
-      throw new Error("JSON content not found.");
+      throw new Error("GLTFBinaryParser: JSON content not found.");
+    }
+    if (typeof this.body === "undefined") {
+      throw new Error("GLTFBinaryParser: Binary buffer chunk not found or type not supported.");
     }
   }
 }

package/src/Viewer/loaders/GLTFCloudDynamicLoader.ts

@@ -28,6 +28,7 @@ import { Viewer } from "../Viewer";
 import { DynamicModelImpl } from "./DynamicGltfLoader/DynamicModelImpl";
 import { DynamicGltfLoader } from "./DynamicGltfLoader/DynamicGltfLoader.js";
 import { GltfStructure } from "./DynamicGltfLoader/GltfStructure.js";
+import { JSONStreamParser } from "./JSONStreamParser";
 
 export class GLTFCloudDynamicLoader extends Loader {
   public viewer: Viewer;
@@ -71,35 +72,35 @@ 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();
     });
 
     const loadController = {
       loadJson: async () => {
-        const progress = (progress: number) => {
+        const jsonParser = new JSONStreamParser();
+
+        const progress = (progress: number, chunk: Uint8Array) => {
+          jsonParser.write(chunk);
           this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
         };
 
-        const arrayBuffer = await model.downloadResource(
-          model.database,
-          progress,
-          this.gltfLoader.getAbortController().signal
-        );
+        await model.downloadResource(model.database, progress, this.gltfLoader.getAbortController().signal);
 
-        const text = new TextDecoder().decode(arrayBuffer);
-        const json = JSON.parse(text);
+        if (!jsonParser.json) {
+          throw new Error("GLTFCloudDynamicLoader: JSON content not found or invalid.");
+        }
 
-        return json;
+        return jsonParser.json;
       },
 
       loadBinaryData: (requests) => {

package/src/Viewer/loaders/GLTFFileDynamicLoader.ts

@@ -29,14 +29,14 @@ import { DynamicModelImpl } from "./DynamicGltfLoader/DynamicModelImpl";
 import { DynamicGltfLoader } from "./DynamicGltfLoader/DynamicGltfLoader.js";
 import { GltfStructure } from "./DynamicGltfLoader/GltfStructure.js";
 import { GLTFLoadingManager, GLTFLoadParams } from "./GLTFLoadingManager";
-import { GLTFBinaryExtension } from "./GLTFBinaryExtension";
+import { GLTFBinaryParser } from "./GLTFBinaryParser";
+import { JSONStreamParser } from "./JSONStreamParser";
 import { RangesLoader } from "./RangesLoader";
 
 export class GLTFFileDynamicLoader extends Loader {
   public viewer: Viewer;
   private gltfLoader: DynamicGltfLoader;
   private manager: GLTFLoadingManager;
-  private gltf: any;
   private glb: ArrayBuffer;
 
   constructor(viewer: Viewer) {
@@ -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();
     });
 
@@ -104,15 +104,16 @@ export class GLTFFileDynamicLoader extends Loader {
 
         const data = await loader.loadAsync(this.manager.fileURL, progress);
 
-        const extension = new GLTFBinaryExtension(data as ArrayBuffer);
-        this.gltf = JSON.parse(extension.content);
-        this.glb = extension.body;
+        const binaryParser = new GLTFBinaryParser(data as ArrayBuffer);
+        const jsonParser = new JSONStreamParser(binaryParser.content);
 
-        if (/\.glb$/i.test(this.manager.fileURL) && !this.glb) {
-          throw new Error("GLTFFileDynamicLoader: Binary buffer chunk not found or type not supported.");
+        if (!jsonParser.json) {
+          throw new Error("GLTFFileDynamicLoader: JSON content not found or invalid.");
         }
 
-        return this.gltf;
+        this.glb = binaryParser.body;
+
+        return jsonParser.json;
       },
 
       loadBinaryData: (ranges, uri = "") => {

package/src/Viewer/loaders/JSONStreamParser.ts

@@ -0,0 +1,38 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { JSONParser } from "@streamparser/json";
+
+export class JSONStreamParser extends JSONParser {
+  public json: any;
+
+  constructor(data?: Uint8Array) {
+    super();
+
+    this.onValue = ({ value, stack }) => {
+      if (stack.length === 0) this.json = value;
+    };
+
+    if (data) this.write(data);
+  }
+}

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);
  *   };
  *

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

@@ -1,5 +0,0 @@
-export declare class GLTFBinaryExtension {
-    content: string;
-    body: ArrayBuffer;
-    constructor(data: ArrayBuffer);
-}