@inweb/viewer-three 27.1.1 → 27.1.2

package/extensions/components/AxesHelperComponent.ts

@@ -35,7 +35,7 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper2 = new AxesHelper(1);
     this.modelHelpers = [];
 
-    this.axesHelper1.setColors("#ccc", "#ccc", "#ccc");
+    // this.axesHelper1.setColors("#ccc", "#ccc", "#ccc");
 
     this.viewer = viewer;
     this.viewer.addEventListener("initialize", this.syncHelper);
@@ -70,27 +70,28 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper1.removeFromParent();
     this.axesHelper2.removeFromParent();
 
-    const size = this.viewer.extents.getSize(new Vector3()).length();
-    const center = this.viewer.extents.getCenter(new Vector3());
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
 
     this.axesHelper1.position.set(0, 0, 0);
-    this.axesHelper1.scale.setScalar(size * 1.25);
+    this.axesHelper1.scale.setScalar(extentsSize * 1.5);
+    this.viewer.helpers.add(this.axesHelper1);
 
-    this.axesHelper2.position.copy(center);
-    this.axesHelper2.scale.setScalar(size);
+    if (this.viewer.models.length < 1) return;
 
-    this.viewer.helpers.add(this.axesHelper1);
+    this.axesHelper2.position.copy(extentsCenter);
+    this.axesHelper2.scale.setScalar(extentsSize);
     this.viewer.helpers.add(this.axesHelper2);
 
     if (this.viewer.models.length < 2) return;
 
     this.viewer.models.forEach((model) => {
-      const extents = model.getExtents(new Box3());
-      const size = extents.getSize(new Vector3()).length();
-      const center = extents.getCenter(new Vector3());
+      const modelExtents = model.getExtents(new Box3());
+      const modelSize = modelExtents.getSize(new Vector3()).length() || 1;
+      const modelCenter = modelExtents.getCenter(new Vector3());
 
-      const helper = new AxesHelper(size);
-      helper.position.copy(center);
+      const helper = new AxesHelper(modelSize);
+      helper.position.copy(modelCenter);
 
       this.modelHelpers.push(helper);
       this.viewer.helpers.add(helper);

package/extensions/components/GridHelperComponent.ts

@@ -48,16 +48,14 @@ class GridHelperComponent implements IComponent {
   syncHelper = () => {
     this.gridHelper.removeFromParent();
 
-    if (this.viewer.extents.isEmpty()) return;
-
-    const size = this.viewer.extents.getSize(new Vector3()).multiply(this.viewer.camera.up).length();
-    const center = this.viewer.extents.getCenter(new Vector3());
+    const extentsSizeUp = this.viewer.extents.getSize(new Vector3()).multiply(this.viewer.camera.up).length() || 1;
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
 
     const upY = new Vector3(0, 1, 0);
     const up = new Vector3().copy(this.viewer.camera.up);
 
-    this.gridHelper.scale.setScalar(size);
-    this.gridHelper.position.copy(center);
+    this.gridHelper.scale.setScalar(extentsSizeUp);
+    this.gridHelper.position.copy(extentsCenter);
     this.gridHelper.quaternion.setFromUnitVectors(upY, up);
 
     this.viewer.helpers.add(this.gridHelper);

package/extensions/components/LightHelperComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { DirectionalLightHelper, HemisphereLightHelper, PointLightHelper, Sphere } from "three";
+import { DirectionalLightHelper, HemisphereLightHelper, PointLightHelper, Vector3 } from "three";
 import { IComponent, components, Viewer } from "@inweb/viewer-three";
 
 class LightHelperComponent implements IComponent {
@@ -53,15 +53,15 @@ class LightHelperComponent implements IComponent {
     });
     this.lightHelpers.length = 0;
 
-    const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
-    const size = extentsSize / 20;
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+    const helperSize = extentsSize / 20;
 
     this.viewer.scene.traverse((object: any) => {
       let helper: DirectionalLightHelper | HemisphereLightHelper | PointLightHelper;
 
-      if (object.isDirectionalLight) helper = new DirectionalLightHelper(object, size, "#aa0000");
-      else if (object.isHemisphereLight) helper = new HemisphereLightHelper(object, size, "#ff9800");
-      else if (object.isPointLight) helper = new PointLightHelper(object, size, "#ff9800");
+      if (object.isDirectionalLight) helper = new DirectionalLightHelper(object, helperSize, "#aa0000");
+      else if (object.isHemisphereLight) helper = new HemisphereLightHelper(object, helperSize, "#ff9800");
+      else if (object.isPointLight) helper = new PointLightHelper(object, helperSize, "#ff9800");
 
       if (helper) {
         this.lightHelpers.push(helper);

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

@@ -12,4 +12,4 @@ export declare const defaultViewPositions: {
     ne: Vector3;
     nw: Vector3;
 };
-export declare function setDefaultViewPosition(viewer: Viewer, position: string): void;
+export declare function setDefaultViewPosition(viewer: Viewer, position?: string): void;

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

@@ -0,0 +1,11 @@
+export interface GLTFBinaryHeader {
+    magic: string;
+    version: number;
+    length: number;
+}
+export declare class GLTFBinaryParser {
+    header: GLTFBinaryHeader;
+    content: Uint8Array;
+    body: ArrayBuffer;
+    constructor(data: ArrayBuffer);
+}

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

@@ -5,7 +5,6 @@ export declare class GLTFFileDynamicLoader extends Loader {
     viewer: Viewer;
     private gltfLoader;
     private manager;
-    private gltf;
     private glb;
     constructor(viewer: Viewer);
     dispose(): void;

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

@@ -0,0 +1,5 @@
+import { JSONParser } from "@streamparser/json";
+export declare class JSONStreamParser extends JSONParser {
+    json: any;
+    constructor(data?: Uint8Array);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "27.1.1",
+  "version": "27.1.2",
   "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,17 +35,19 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~27.1.1",
-    "@inweb/eventemitter2": "~27.1.1",
-    "@inweb/markup": "~27.1.1",
-    "@inweb/viewer-core": "~27.1.1"
+    "@inweb/client": "~27.1.2",
+    "@inweb/eventemitter2": "~27.1.2",
+    "@inweb/markup": "~27.1.2",
+    "@inweb/viewer-core": "~27.1.2"
   },
   "devDependencies": {
+    "@streamparser/json": "^0.0.22",
     "@types/three": "^0.180.0",
     "potree-core": "^2.0.11",
     "three": "^0.180.0"
   },
   "peerDependencies": {
+    "@streamparser/json": "^0.0.22",
     "@types/three": "^0.180.0",
     "three": "^0.180.0"
   }

package/src/Viewer/Viewer.ts

@@ -31,7 +31,6 @@ import {
   Plane,
   Raycaster,
   Scene,
-  Sphere,
   Vector2,
   Vector3,
   WebGLRenderer,
@@ -458,15 +457,14 @@ export class Viewer
     if (model && typeof model.database === "string") {
       file = model.file;
     }
-    if (!model) throw new Error(`Format not supported`);
 
     let format = params.format;
-    if (!format && typeof file["type"] === "string") format = file["type"].split(".").pop();
+    if (!format && file && typeof file["type"] === "string") format = file["type"].split(".").pop();
     if (!format && typeof file === "string") format = file.split(".").pop();
     if (!format && file instanceof globalThis.File) format = file.name.split(".").pop();
 
     const loader: ILoader = loaders.createLoader(this, model, format);
-    if (!loader) throw new Error(`Format not supported`);
+    if (!loader) throw new Error(`Format not supported (${format})`);
     this.loaders.push(loader);
 
     this.emitEvent({ type: "geometrystart", file, model });
@@ -534,7 +532,6 @@ export class Viewer
     this.helpers.clear();
 
     this.extents.makeEmpty();
-    this.target.set(0, 0, 0);
 
     this.syncOptions();
     this.syncOverlay();
@@ -675,7 +672,7 @@ export class Viewer
 
     const setOrthogonalCamera = (orthogonal_camera: IOrthogonalCamera) => {
       if (orthogonal_camera) {
-        const extentsSize = this.extents.getBoundingSphere(new Sphere()).radius * 2;
+        const extentsSize = this.extents.getSize(new Vector3()).length() || 1;
         const rendererSize = this.renderer.getSize(new Vector2());
         const aspectRatio = rendererSize.x / rendererSize.y;
 
@@ -706,7 +703,7 @@ export class Viewer
 
     const setPerspectiveCamera = (perspective_camera: IPerspectiveCamera) => {
       if (perspective_camera) {
-        const extentsSize = this.extents.getBoundingSphere(new Sphere()).radius * 2;
+        const extentsSize = this.extents.getSize(new Vector3()).length() || 1;
         const rendererSize = this.renderer.getSize(new Vector2());
         const aspectRatio = rendererSize.x / rendererSize.y;
 

package/src/Viewer/commands/SetDefaultViewPosition.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Quaternion, Sphere, Vector3 } from "three";
+import { Quaternion, Vector3 } from "three";
 import type { Viewer } from "../Viewer";
 import { zoomTo } from "./ZoomTo";
 
@@ -38,9 +38,9 @@ export const defaultViewPositions = {
   nw: new Vector3(1, 1, 1).normalize(),
 };
 
-export function setDefaultViewPosition(viewer: Viewer, position: string): void {
+export function setDefaultViewPosition(viewer: Viewer, position = "sw"): void {
   const extentsCenter = viewer.extents.getCenter(new Vector3());
-  const extentsSize = viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
+  const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
 
   const upY = new Vector3(0, 1, 0);
   const offsetY = defaultViewPositions[position] || defaultViewPositions["sw"];

package/src/Viewer/commands/ZoomTo.ts

@@ -21,14 +21,14 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, MathUtils, Sphere, Vector2, Vector3 } from "three";
+import { Box3, MathUtils, Vector2, Vector3 } from "three";
 import type { Viewer } from "../Viewer";
 
 export function zoomTo(viewer: Viewer, box: Box3): void {
   if (box.isEmpty()) return;
 
   const boxCenter = box.getCenter(new Vector3());
-  const boxSize = box.getBoundingSphere(new Sphere()).radius;
+  const boxSize = box.getSize(new Vector3()).length() || 1;
 
   const rendererSize = viewer.renderer.getSize(new Vector2());
   const aspectRatio = rendererSize.x / rendererSize.y;
@@ -38,14 +38,14 @@ export function zoomTo(viewer: Viewer, box: Box3): void {
   if (camera.isPerspectiveCamera) {
     const offset = new Vector3(0, 0, 1)
       .applyQuaternion(camera.quaternion)
-      .multiplyScalar(boxSize / Math.tan(MathUtils.degToRad(camera.fov * 0.5)));
+      .multiplyScalar(boxSize / (2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5))));
 
     camera.position.copy(offset).add(boxCenter);
     camera.updateMatrixWorld();
   }
   if (camera.isOrthographicCamera) {
-    camera.top = boxSize;
-    camera.bottom = -boxSize;
+    camera.top = boxSize / 2;
+    camera.bottom = -boxSize / 2;
     camera.left = camera.bottom * aspectRatio;
     camera.right = camera.top * aspectRatio;
     camera.zoom = 1;
@@ -53,7 +53,7 @@ export function zoomTo(viewer: Viewer, box: Box3): void {
 
     const offset = new Vector3(0, 0, 1)
       .applyQuaternion(camera.quaternion)
-      .multiplyScalar(viewer.extents.getBoundingSphere(new Sphere()).radius * 3);
+      .multiplyScalar(viewer.extents.getSize(new Vector3()).length() || 1);
 
     camera.position.copy(offset).add(boxCenter);
     camera.updateMatrixWorld();

package/src/Viewer/components/CameraComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { MathUtils, OrthographicCamera, PerspectiveCamera, Sphere, Vector2, Vector3 } from "three";
+import { MathUtils, OrthographicCamera, PerspectiveCamera, Vector2, Vector3 } from "three";
 
 import { CameraMode, IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -47,7 +47,7 @@ export class CameraComponent implements IComponent {
   }
 
   switchCamera(camera: any) {
-    const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2 || 1;
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
     const rendererSize = this.viewer.renderer.getSize(new Vector2());
     const aspectRatio = rendererSize.x / rendererSize.y;
 
@@ -95,7 +95,7 @@ export class CameraComponent implements IComponent {
     if (currentCamera.isPerspectiveCamera) {
       const fov = currentCamera.fov;
       const distance = currentCamera.position.distanceTo(target);
-      const fieldHeight = 2 * Math.tan(MathUtils.degToRad(fov) / 2) * distance;
+      const fieldHeight = 2 * Math.tan(MathUtils.degToRad(fov * 0.5)) * distance;
 
       camera = new OrthographicCamera();
       camera.top = fieldHeight / 2;

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/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

@@ -66,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;
   };

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

@@ -74,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;
   };

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;
@@ -86,20 +87,20 @@ export class GLTFCloudDynamicLoader extends Loader {
 
     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) => {