@inweb/viewer-three 27.1.0 → 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/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/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/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

@@ -62,7 +62,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     isInitialized(): boolean;
     setSize(width: number, height: number, updateStyle?: boolean): void;
     update(force?: boolean): void;
-    render(time?: DOMHighResTimeStamp): void;
+    render(time?: DOMHighResTimeStamp, force?: boolean): void;
     loadReferences(model: Model | File | Assembly): Promise<this>;
     /**
      * Loads a file into the viewer.

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/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/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/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/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": "27.1.0",
+  "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.0",
-    "@inweb/eventemitter2": "~27.1.0",
-    "@inweb/markup": "~27.1.0",
-    "@inweb/viewer-core": "~27.1.0"
+    "@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

@@ -24,13 +24,13 @@
 import {
   Box3,
   LinearSRGBColorSpace,
+  // LinearToneMapping,
   Object3D,
   OrthographicCamera,
   PerspectiveCamera,
   Plane,
   Raycaster,
   Scene,
-  Sphere,
   Vector2,
   Vector3,
   WebGLRenderer,
@@ -195,20 +195,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);
@@ -233,13 +229,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);
   }
@@ -310,8 +308,8 @@ 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 {
@@ -326,9 +324,9 @@ export class Viewer
 
   // Internal render routines
 
-  render(time?: DOMHighResTimeStamp): void {
+  render(time?: DOMHighResTimeStamp, force = false): void {
     if (!this.renderer) return;
-    if (!this._renderNeeded) return;
+    if (!this._renderNeeded && !force) return;
 
     if (!time) time = performance.now();
     const deltaTime = (time - this._renderTime) / 1000;
@@ -459,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 });
@@ -479,6 +476,7 @@ export class Viewer
       throw error;
     }
     this.emitEvent({ type: "geometryend", file, model });
+    this.update(true);
 
     return this;
   }
@@ -534,13 +532,12 @@ export class Viewer
     this.helpers.clear();
 
     this.extents.makeEmpty();
-    this.target.set(0, 0, 0);
 
     this.syncOptions();
     this.syncOverlay();
-    this.update(true);
 
     this.emitEvent({ type: "clear" });
+    this.update(true);
 
     return this;
   }
@@ -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;
 
@@ -769,10 +766,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 {
@@ -842,11 +839,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 };
 
@@ -854,6 +847,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();
@@ -876,14 +875,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/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;