@inweb/viewer-three 26.10.6 → 26.12.0

package/src/Viewer/components/ExtentsComponent.ts

@@ -53,8 +53,11 @@ export class ExtentsComponent implements IComponent {
   syncExtents = () => {
     const extents = new Box3();
     this.viewer.models.forEach((model) => model.getExtents(extents));
-
     this.viewer.extents.copy(extents);
+
+    // do not change target after opening the second file in assembly
+    if (this.viewer.models.length > 1) return;
+
     this.viewer.extents.getCenter(this.viewer.target);
   };
 }

package/src/Viewer/components/InfoComponent.ts

@@ -0,0 +1,187 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { REVISION, Vector2 } from "three";
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class InfoComponent implements IComponent {
+  protected viewer: Viewer;
+  private startTime: number;
+  private beginTime: number;
+  private prevTime: number;
+  private frames: number;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.startTime = 0;
+    this.beginTime = performance.now();
+    this.prevTime = performance.now();
+    this.frames = 0;
+    this.viewer.addEventListener("initialize", this.initialize);
+    this.viewer.addEventListener("clear", this.clear);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("geometrystart", this.geometryStart);
+    this.viewer.addEventListener("databasechunk", this.databaseChunk);
+    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.viewer.addEventListener("resize", this.resize);
+    this.viewer.addEventListener("render", this.render);
+    this.viewer.addEventListener("animate", this.animate);
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("initialize", this.initialize);
+    this.viewer.removeEventListener("clear", this.clear);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("geometrystart", this.geometryStart);
+    this.viewer.removeEventListener("databasechunk", this.databaseChunk);
+    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    this.viewer.removeEventListener("resize", this.resize);
+    this.viewer.removeEventListener("render", this.render);
+    this.viewer.addEventListener("animate", this.animate);
+  }
+
+  initialize = () => {
+    try {
+      const gl = this.viewer.renderer.getContext();
+      const dbgInfo = gl.getExtension("WEBGL_debug_renderer_info");
+      if (dbgInfo) {
+        this.viewer.info.system.webglRenderer = gl.getParameter(dbgInfo.UNMASKED_RENDERER_WEBGL);
+        this.viewer.info.system.webglVendor = gl.getParameter(dbgInfo.UNMASKED_VENDOR_WEBGL);
+      }
+    } catch (error) {
+      console.error("Error reading WebGL info.", error);
+    }
+
+    console.log("THREE.WebGLRenderer:", REVISION);
+    console.log("WebGL Renderer:", this.viewer.info.system.webglRenderer);
+    console.log("WebGL Vendor:", this.viewer.info.system.webglVendor);
+
+    this.resize();
+
+    this.optionsChange({ data: this.viewer.options });
+  };
+
+  clear = () => {
+    this.viewer.info.performance.timeToFirstRender = 0;
+    this.viewer.info.performance.loadTime = 0;
+
+    this.viewer.info.scene.objects = 0;
+    this.viewer.info.scene.triangles = 0;
+    this.viewer.info.scene.points = 0;
+    this.viewer.info.scene.lines = 0;
+    this.viewer.info.scene.edges = 0;
+
+    this.viewer.info.optimizedScene.objects = 0;
+    this.viewer.info.optimizedScene.triangles = 0;
+    this.viewer.info.optimizedScene.points = 0;
+    this.viewer.info.optimizedScene.lines = 0;
+    this.viewer.info.optimizedScene.edges = 0;
+
+    this.viewer.info.memory.geometries = 0;
+    this.viewer.info.memory.geometryBytes = 0;
+    this.viewer.info.memory.textures = 0;
+    this.viewer.info.memory.textureBytes = 0;
+    this.viewer.info.memory.materials = 0;
+    this.viewer.info.memory.totalEstimatedGpuBytes = 0;
+    this.viewer.info.memory.usedJSHeapSize = 0;
+  };
+
+  optionsChange = ({ data: options }) => {
+    if (options.antialiasing === false) this.viewer.info.render.antialiasing = "";
+    else if (options.antialiasing === true) this.viewer.info.render.antialiasing = "mxaa";
+    else this.viewer.info.render.antialiasing = options.antialiasing;
+  };
+
+  geometryStart = () => {
+    this.startTime = performance.now();
+  };
+
+  databaseChunk = () => {
+    this.viewer.info.performance.timeToFirstRender += performance.now() - this.startTime;
+
+    console.log("Time to first render:", this.viewer.info.performance.timeToFirstRender, "ms");
+  };
+
+  geometryEnd = () => {
+    const model = this.viewer.models[this.viewer.models.length - 1];
+    const info = model.getInfo();
+
+    this.viewer.info.scene.objects += info.scene.objects;
+    this.viewer.info.scene.triangles += info.scene.triangles;
+    this.viewer.info.scene.points += info.scene.points;
+    this.viewer.info.scene.lines += info.scene.lines;
+    this.viewer.info.scene.edges += info.scene.edges;
+
+    this.viewer.info.optimizedScene.objects += info.optimizedScene.objects;
+    this.viewer.info.optimizedScene.triangles += info.optimizedScene.triangles;
+    this.viewer.info.optimizedScene.points += info.optimizedScene.points;
+    this.viewer.info.optimizedScene.lines += info.optimizedScene.lines;
+    this.viewer.info.optimizedScene.edges += info.optimizedScene.edges;
+
+    this.viewer.info.memory.geometries += info.memory.geometries;
+    this.viewer.info.memory.geometryBytes += info.memory.geometryBytes;
+    this.viewer.info.memory.textures += info.memory.textures;
+    this.viewer.info.memory.textureBytes += info.memory.textureBytes;
+    this.viewer.info.memory.materials += info.memory.materials;
+    this.viewer.info.memory.totalEstimatedGpuBytes += info.memory.totalEstimatedGpuBytes;
+
+    const memory = performance["memory"];
+    if (memory) this.viewer.info.memory.usedJSHeapSize = memory.usedJSHeapSize;
+
+    this.viewer.info.performance.loadTime += performance.now() - this.startTime;
+
+    console.log("Number of objects:", info.scene.objects);
+    console.log("Number of objects after optimization:", info.optimizedScene.objects);
+    console.log("Total geometry size:", info.memory.totalEstimatedGpuBytes / (1024 * 1024), "MB");
+
+    console.log("File load time:", this.viewer.info.performance.loadTime, "ms");
+  };
+
+  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;
+  };
+
+  render = () => {
+    this.viewer.info.render.drawCalls = this.viewer.renderer.info.render.calls;
+    this.viewer.info.render.triangles = this.viewer.renderer.info.render.triangles;
+    this.viewer.info.render.points = this.viewer.renderer.info.render.points;
+    this.viewer.info.render.lines = this.viewer.renderer.info.render.lines;
+  };
+
+  animate = () => {
+    const time = performance.now();
+
+    this.viewer.info.performance.frameTime = Math.round(time - this.beginTime);
+    this.beginTime = time;
+
+    this.frames++;
+    if (time - this.prevTime >= 1000) {
+      this.viewer.info.performance.fps = Math.round((this.frames * 1000) / (time - this.prevTime));
+      this.prevTime = time;
+      this.frames = 0;
+    }
+  };
+}

package/src/Viewer/components/SelectionComponent.ts

@@ -21,22 +21,21 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Intersection, Object3D, Raycaster, Vector2 } from "three";
+import { Object3D, Vector2 } from "three";
 
 import type { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 import type { IModelImpl } from "../models/IModelImpl";
 import type { HighlighterComponent } from "./HighlighterComponent";
+import { Snapper } from "../measurement/Snapper";
 
 export class SelectionComponent implements IComponent {
   protected viewer: Viewer;
-  protected raycaster: Raycaster;
   protected downPosition: Vector2;
   protected highlighter: HighlighterComponent;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
-    this.raycaster = new Raycaster();
     this.downPosition = new Vector2();
 
     this.viewer.addEventListener("pointerdown", this.onPointerDown);
@@ -64,10 +63,12 @@ export class SelectionComponent implements IComponent {
     const upPosition = this.getMousePosition(event, new Vector2());
     if (upPosition.distanceTo(this.downPosition) !== 0) return;
 
+    const snapper = new Snapper(this.viewer.camera, this.viewer.renderer, this.viewer.canvas);
+
     let intersections = [];
     this.viewer.models.forEach((model) => {
       const objects = model.getVisibleObjects();
-      const intersects = this.getPointerIntersects(upPosition, objects);
+      const intersects = snapper.getPointerIntersects(upPosition, objects);
       if (intersects.length > 0) intersections.push({ ...intersects[0], model });
     });
     intersections = intersections.sort((a, b) => a.distance - b.distance);
@@ -84,7 +85,9 @@ export class SelectionComponent implements IComponent {
     }
 
     this.viewer.update();
+
     this.viewer.emitEvent({ type: "select", data: undefined, handles: this.viewer.getSelected() });
+    this.viewer.emitEvent({ type: "select2", data: undefined, handles: this.viewer.getSelected2() });
   };
 
   onDoubleClick = (event: MouseEvent) => {
@@ -97,32 +100,6 @@ export class SelectionComponent implements IComponent {
     return target.set(event.clientX, event.clientY);
   }
 
-  getPointerIntersects(mouse: Vector2, objects: Object3D[]): Array<Intersection<Object3D>> {
-    const rect = this.viewer.canvas.getBoundingClientRect();
-    const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
-    const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
-
-    const coords = new Vector2(x, y);
-    this.raycaster.setFromCamera(coords, this.viewer.camera);
-
-    this.raycaster.params = {
-      Mesh: {},
-      Line: { threshold: 0.05 },
-      Line2: { threshold: 0.05 },
-      LOD: {},
-      Points: { threshold: 0.01 },
-      Sprite: {},
-    };
-
-    let intersects = this.raycaster.intersectObjects(objects, false);
-
-    (this.viewer.renderer.clippingPlanes || []).forEach((plane) => {
-      intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
-    });
-
-    return intersects;
-  }
-
   select(objects: Object3D | Object3D[], model?: IModelImpl) {
     if (!model) {
       this.viewer.models.forEach((model) => this.select(objects, model));

package/src/Viewer/components/index.ts

@@ -27,6 +27,7 @@ import { BackgroundComponent } from "./BackgroundComponent";
 import { CameraComponent } from "./CameraComponent";
 import { ExtentsComponent } from "./ExtentsComponent";
 import { LightComponent } from "./LightComponent";
+import { InfoComponent } from "./InfoComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
 import { HighlighterComponent } from "./HighlighterComponent";
@@ -41,8 +42,8 @@ import { ResetComponent } from "./ResetComponent";
  *
  * 1. Define a component class implements {@link IComponent}.
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
- * 3. Define the component logic in the event listeners. For example, listen for the `mousedown` event and
- *    select objects when the left mouse button is pressed.
+ * 3. Define the component logic in the event listeners. For example, listen for the `geometryend` event and
+ *    implement post-processing logic for the model.
  * 4. Override {@link IComponent.dispose} and remove mouse event listeners from the viewer.
  * 5. Register component provider in the components registry by calling the
  *    {@link components.registerComponent}.
@@ -57,15 +58,15 @@ import { ResetComponent } from "./ResetComponent";
  *
  *   constructor(viewer: Viewer) {
  *     this.viewer = viewer;
- *     this.viewer.addEventListener("mousedown", this.onMouseDown);
+ *     this.viewer.addEventListener("geometryend", this.onGeometryEnd);
  *   }
  *
  *   override dispose() {
- *     this.viewer.removeEventListener("mousedown", this.onMouseDown);
+ *     this.viewer.removeEventListener("geometryend", this.onGeometryEnd);
  *   }
  *
- *   onMouseDown = (event: PointerEvent) => {
- *     // place custom logic here
+ *   onGeometryEnd = (event: MouseEvent) => {
+ *     this.viewer.executeCommand("zoomToExtents");
  *   };
  * }
  *
@@ -80,6 +81,7 @@ components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponen
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
 components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
 components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
+components.registerComponent("InfoComponent", (viewer) => new InfoComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
 components.registerComponent("HighlighterComponent", (viewer) => new HighlighterComponent(viewer));