@inweb/viewer-three 25.11.0 → 25.11.1

package/lib/Viewer/Viewer.d.ts

@@ -3,10 +3,11 @@ import { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, Model, File } from "@inweb/client";
 import { CanvasEventMap, IDragger, IOptions, IViewer, IViewpoint, Options, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
+import { IMarkup, IWorldTransform } from "@inweb/markup";
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
  */
-export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap> implements IViewer {
+export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap> implements IViewer, IWorldTransform {
     client: Client | undefined;
     protected _options: Options;
     private canvaseventlistener;
@@ -25,6 +26,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     private components;
     private renderNeeded;
     private renderTime;
+    private _markup;
     /**
      * @param client - The `Client` instance that is used to load model reference files from the
      *   Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
@@ -33,6 +35,12 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     constructor(client?: Client);
     get options(): IOptions;
     get draggers(): string[];
+    /**
+     * 2D markup core instance used to create markups.
+     *
+     * @readonly
+     */
+    get markup(): IMarkup;
     initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this>;
     dispose(): this;
     isInitialized(): boolean;
@@ -140,6 +148,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
         withCredentials?: boolean;
     }): Promise<this>;
     clear(): this;
+    syncOverlay(): void;
+    clearOverlay(): void;
+    clearSlices(): void;
     getSelected(): string[];
     setSelected(handles?: string[]): void;
     clearSelected(): void;
@@ -152,6 +163,27 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     setActiveDragger(name?: string): IDragger | null;
     resetActiveDragger(): void;
     is3D(): boolean;
+    screenToWorld(position: {
+        x: number;
+        y: number;
+    }): {
+        x: number;
+        y: number;
+        z: number;
+    };
+    worldToScreen(position: {
+        x: number;
+        y: number;
+        z: number;
+    }): {
+        x: number;
+        y: number;
+    };
+    getScale(): {
+        x: number;
+        y: number;
+        z: number;
+    };
     executeCommand(id: string, ...args: any[]): any;
     getComponent(type: any): any;
     drawViewpoint(viewpoint: IViewpoint): void;

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

@@ -11,8 +11,8 @@ export declare class SelectionComponent implements IDisposable {
     onPointerDown: (event: PointerEvent) => void;
     onPointerUp: (event: PointerEvent) => void;
     onDoubleClick: (event: MouseEvent) => void;
-    getMousePosition(event: MouseEvent, position: Vector2): Vector2;
-    getPointerIntersects(position: Vector2): Array<Intersection<Object3D>>;
+    getMousePosition(event: MouseEvent, target: Vector2): Vector2;
+    getPointerIntersects(mouse: Vector2): Array<Intersection<Object3D>>;
     select(object: any): void;
     clearSelection(): void;
     optionsChange: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "25.11.0",
-  "description": "3D viewer powered by Three.js",
+  "version": "25.11.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",
   "author": "Open Design Alliance",
@@ -28,9 +28,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~25.11.0",
-    "@inweb/eventemitter2": "~25.11.0",
-    "@inweb/viewer-core": "~25.11.0"
+    "@inweb/client": "~25.11.1",
+    "@inweb/eventemitter2": "~25.11.1",
+    "@inweb/markup": "~25.11.1",
+    "@inweb/viewer-core": "~25.11.1"
   },
   "devDependencies": {
     "@types/three": "^0.152.1",

package/src/Viewer/Viewer.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, LinearToneMapping, Object3D, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
+import { Box3, LinearToneMapping, Object3D, PerspectiveCamera, Plane, Scene, Vector3, WebGLRenderer } from "three";
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { GLTFLoadingManager } from "./loaders/GLTFLoadingManager";
 
@@ -31,14 +31,19 @@ import {
   CANVAS_EVENTS,
   CanvasEventMap,
   commands,
+  IClippingPlane,
+  IComponent,
   IDragger,
   IOptions,
+  IPerspectiveCamera,
+  IPoint,
   IViewer,
   IViewpoint,
   Options,
   OptionsEventMap,
   ViewerEventMap,
 } from "@inweb/viewer-core";
+import { IMarkup, IWorldTransform, Markup } from "@inweb/markup";
 
 import { PanDragger } from "./draggers/PanDragger";
 import { OrbitDragger } from "./draggers/OrbitDragger";
@@ -64,7 +69,10 @@ import { WCSHelperComponent } from "./components/WCSHelperComponent";
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
  */
-export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap> implements IViewer {
+export class Viewer
+  extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap>
+  implements IViewer, IWorldTransform
+{
   public client: Client | undefined;
   protected _options: Options;
 
@@ -90,6 +98,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
   private renderNeeded: boolean;
   private renderTime: DOMHighResTimeStamp;
 
+  private _markup: IMarkup;
+
   /**
    * @param client - The `Client` instance that is used to load model reference files from the
    *   Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
@@ -126,6 +136,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
 
     this.render = this.render.bind(this);
     this.update = this.update.bind(this);
+
+    this._markup = new Markup();
   }
 
   get options(): IOptions {
@@ -136,6 +148,15 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return Object.keys(this.draggerFactory);
   }
 
+  /**
+   * 2D markup core instance used to create markups.
+   *
+   * @readonly
+   */
+  get markup(): IMarkup {
+    return this._markup;
+  }
+
   initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this> {
     this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
 
@@ -156,6 +177,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     this.canvas = canvas;
     this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
 
+    this._markup.initialize(this.canvas, this.canvasEvents, this, this);
+
     this.components.push(new ExtentsComponent(this));
     this.components.push(new LightComponent(this));
     this.components.push(new BackgroundComponent(this));
@@ -169,6 +192,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     // this.components.push(new ExtentsHelperComponent(this));
 
     this.syncOptions();
+    this.syncOverlay();
 
     this.renderTime = performance.now();
     this.render(this.renderTime);
@@ -189,11 +213,13 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     this.components.forEach((component: IDisposable) => component.dispose());
     this.components = [];
 
-    this.setActiveDragger("");
+    this.setActiveDragger();
     this.removeAllListeners();
 
     this.clear();
 
+    this._markup.dispose();
+
     if (this.canvas) {
       this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
       this.canvas = undefined;
@@ -418,8 +444,9 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
       this.models.push(gltf);
       this.scene.add(gltf.scene);
 
+      this.syncOptions();
+      this.syncOverlay();
       this.update();
-      this.resetActiveDragger();
 
       this.emitEvent({ type: "databasechunk" });
       this.emitEvent({ type: "geometryend", data: gltf.scene });
@@ -450,9 +477,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     }
 
     this.setActiveDragger();
-
-    this.selected = [];
-    this.renderer.clippingPlanes = [];
+    this.clearSlices();
+    this.clearOverlay();
 
     this.helpers.traverse(disposeObject);
     this.helpers.clear();
@@ -463,12 +489,36 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
 
     this.scene.clear();
 
-    this.emitEvent({ type: "clear" });
+    this.syncOptions();
+    this.syncOverlay();
     this.update(true);
 
+    this.emitEvent({ type: "clear" });
+
     return this;
   }
 
+  syncOverlay(): void {
+    if (!this.renderer) return;
+
+    this._markup.syncOverlay();
+    this.update();
+  }
+
+  clearOverlay(): void {
+    if (!this.renderer) return;
+
+    this._markup.clearOverlay();
+    this.update();
+  }
+
+  clearSlices(): void {
+    if (!this.renderer) return;
+
+    this.renderer.clippingPlanes = [];
+    this.update();
+  }
+
   getSelected(): string[] {
     return this.executeCommand("getSelected");
   }
@@ -528,6 +578,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
           .join(" ");
       }
       this.emitEvent({ type: "changeactivedragger", data: name });
+      this.update();
     }
     return this._activeDragger;
   }
@@ -544,6 +595,36 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return true;
   }
 
+  screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
+    if (!this.renderer) return { x: position.x, y: position.y, z: 0 };
+
+    const rect = this.canvas.getBoundingClientRect();
+    const x = position.x / (rect.width / 2) - 1;
+    const y = -position.y / (rect.height / 2) + 1;
+
+    const point = new Vector3(x, y, -1);
+    point.unproject(this.camera);
+
+    return { x: point.x, y: point.y, z: point.z };
+  }
+
+  worldToScreen(position: { x: number; y: number; z: number }): { x: number; y: number } {
+    if (!this.renderer) return { x: position.x, y: position.y };
+
+    const point = new Vector3(position.x, position.y, position.z);
+    point.project(this.camera);
+
+    const rect = this.canvas.getBoundingClientRect();
+    const x = (point.x + 1) * (rect.width / 2);
+    const y = (-point.y + 1) * (rect.height / 2);
+
+    return { x, y };
+  }
+
+  getScale(): { x: number; y: number; z: number } {
+    return { x: 1, y: 1, z: 1 };
+  }
+
   executeCommand(id: string, ...args: any[]): any {
     return commands("ThreeJS").executeCommand(id, this, ...args);
   }
@@ -552,13 +633,101 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return this.components.find((component) => component instanceof type);
   }
 
-  drawViewpoint(viewpoint: IViewpoint): void {}
+  drawViewpoint(viewpoint: IViewpoint): void {
+    if (!this.renderer) return;
+
+    const getVector3FromPoint3d = ({ x, y, z }): Vector3 => new Vector3(x, y, z);
+
+    const setPerspectiveCamera = (camera: IPerspectiveCamera) => {
+      if (camera) {
+        this.camera.up.copy(getVector3FromPoint3d(camera.up_vector));
+        this.camera.fov = camera.field_of_view;
+        this.camera.position.copy(getVector3FromPoint3d(camera.view_point));
+        this.camera.lookAt(getVector3FromPoint3d(camera.direction).add(this.camera.position));
+        this.camera.updateMatrixWorld();
+        this.camera.updateProjectionMatrix();
+      }
+    };
+
+    const setClippingPlanes = (clipping_planes: IClippingPlane[]) => {
+      clipping_planes?.forEach((clipping_plane) => {
+        const plane = new Plane();
+        plane.setFromNormalAndCoplanarPoint(
+          getVector3FromPoint3d(clipping_plane.direction),
+          getVector3FromPoint3d(clipping_plane.location)
+        );
+
+        this.renderer.clippingPlanes.push(plane);
+      });
+    };
+
+    const setSelection = (selection: IComponent[]) => {
+      this.setSelected(selection?.map((component) => component.handle));
+    };
+
+    const draggerName = this._activeDragger?.name;
+
+    this.setActiveDragger();
+    this.clearSlices();
+    this.clearOverlay();
+
+    this.clearSelected();
+    this.showAll();
+    this.explode();
+
+    setPerspectiveCamera(viewpoint.perspective_camera);
+    setClippingPlanes(viewpoint.clipping_planes);
+    setSelection(viewpoint.selection);
+    this._markup.setViewpoint(viewpoint);
+
+    this.target = getVector3FromPoint3d(viewpoint.custom_fields?.camera_target ?? this.target);
+
+    this.setActiveDragger(draggerName);
+    this.emitEvent({ type: "drawviewpoint", data: viewpoint });
+    this.update();
+  }
 
   createViewpoint(): IViewpoint {
-    const viewpoint: IViewpoint = {};
+    if (!this.renderer) return {};
+
+    const getPoint3dFromVector3 = ({ x, y, z }): IPoint => ({ x, y, z });
+
+    const getPerspectiveCamera = (): IPerspectiveCamera => {
+      return {
+        view_point: getPoint3dFromVector3(this.camera.position),
+        direction: getPoint3dFromVector3(this.camera.getWorldDirection(new Vector3())),
+        up_vector: getPoint3dFromVector3(this.camera.up),
+        field_of_view: this.camera.fov,
+      };
+    };
 
-    viewpoint.snapshot = { data: this.canvas?.toDataURL("image/jpeg", 0.25) };
+    const getClippingPlanes = (): IClippingPlane[] => {
+      const clipping_planes = [];
+      this.renderer.clippingPlanes.forEach((plane: Plane) => {
+        const clipping_plane = {
+          location: getPoint3dFromVector3(plane.coplanarPoint(new Vector3())),
+          direction: getPoint3dFromVector3(plane.normal),
+        };
+        clipping_planes.push(clipping_plane);
+      });
+      return clipping_planes;
+    };
+
+    const getSelection = (): IComponent[] => {
+      return this.getSelected().map((handle) => ({ handle }));
+    };
+
+    const viewpoint: IViewpoint = { custom_fields: {} };
+
+    viewpoint.perspective_camera = getPerspectiveCamera();
+    viewpoint.clipping_planes = getClippingPlanes();
+    viewpoint.selection = getSelection();
     viewpoint.description = new Date().toDateString();
+    this._markup.getViewpoint(viewpoint);
+
+    viewpoint.custom_fields.camera_target = getPoint3dFromVector3(this.target);
+
+    this.emitEvent({ type: "createviewpoint", data: viewpoint });
 
     return viewpoint;
   }

package/src/Viewer/commands/ClearMarkup.ts

@@ -24,6 +24,5 @@
 import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-// markup should be as a separate library
-commands("ThreeJS").registerCommand("clearMarkup", (viewer: Viewer) => console.warn("clearMarkup not implemented"));
+commands("ThreeJS").registerCommand("clearMarkup", (viewer: Viewer) => viewer.clearOverlay());
 commands("ThreeJS").registerCommandAlias("clearMarkup", "clearOverlay");

package/src/Viewer/commands/ClearSlices.ts

@@ -24,9 +24,4 @@
 import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function clearSlices(viewer: Viewer) {
-  viewer.renderer.clippingPlanes = [];
-  viewer.update();
-}
-
-commands("ThreeJS").registerCommand("clearSlices", clearSlices);
+commands("ThreeJS").registerCommand("clearSlices", (viewer: Viewer) => viewer.clearSlices());

package/src/Viewer/commands/ResetView.ts

@@ -25,7 +25,7 @@ import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
 function resetView(viewer: Viewer): void {
-  viewer.executeCommand("setActiveDragger", "");
+  viewer.executeCommand("setActiveDragger");
   viewer.executeCommand("clearSlices");
   viewer.executeCommand("clearOverlay");
   viewer.executeCommand("setMarkupColor");

package/src/Viewer/commands/SetDefaultViewPosition.ts

@@ -31,8 +31,8 @@ export const defaultViewPositions = {
   bottom: new Vector3(0, 0, -1),
   left: new Vector3(-1, 0, 0),
   right: new Vector3(1, 0, 0),
-  front: new Vector3(0, 1, 0),
-  back: new Vector3(0, -1, 0),
+  front: new Vector3(0, -1, 0),
+  back: new Vector3(0, 1, 0),
   sw: new Vector3(-0.5, -0.5, 1.0).normalize(),
   se: new Vector3(0.5, -0.5, 1.0).normalize(),
   ne: new Vector3(0.5, 0.5, 1.0).normalize(),
@@ -42,16 +42,17 @@ export const defaultViewPositions = {
 function setDefaultViewPosition(viewer: Viewer, position: string): void {
   const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
 
-  const camera = viewer.camera;
   const center = viewer.extents.getCenter(new Vector3());
   const sphere = viewer.extents.getBoundingSphere(new Sphere());
-  const offset = new Vector3().copy(direction).multiplyScalar(sphere.radius);
+  const offet = direction.clone().multiplyScalar(sphere.radius);
 
-  camera.position.copy(center);
-  camera.position.add(offset);
-  camera.rotation.set(0, 0, 0);
+  const camera = viewer.camera;
+  camera.position.copy(center).add(offet);
   camera.lookAt(center);
   camera.updateProjectionMatrix();
+  camera.updateMatrixWorld();
+
+  viewer.target.copy(center);
 
   viewer.update();
   viewer.emit({ type: "viewposition", data: position });

package/src/Viewer/components/DefaultPositionComponent.ts

@@ -49,7 +49,7 @@ export class DefaultPositionComponent implements IDisposable {
     this.viewer.camera.updateMatrixWorld();
     this.viewer.camera.updateProjectionMatrix();
 
-    // this.viewer.executeCommand("setDefaultViewPosition", "sw");
+    this.viewer.executeCommand("setDefaultViewPosition", "sw");
     this.viewer.executeCommand("zoomToExtents");
   };
 }

package/src/Viewer/components/SelectionComponent.ts

@@ -85,18 +85,17 @@ export class SelectionComponent implements IDisposable {
     this.viewer.executeCommand("zoomToSelected");
   };
 
-  getMousePosition(event: MouseEvent, position: Vector2): Vector2 {
-    const rect = this.viewer.canvas.getBoundingClientRect();
-
-    position.setX((event.clientX - rect.left) / rect.width);
-    position.setY((event.clientY - rect.top) / rect.height);
-
-    return position;
+  getMousePosition(event: MouseEvent, target: Vector2): Vector2 {
+    return target.set(event.clientX, event.clientY);
   }
 
-  getPointerIntersects(position: Vector2): Array<Intersection<Object3D>> {
-    const mouse = new Vector2(position.x * 2 - 1, -(position.y * 2) + 1);
-    this.raycaster.setFromCamera(mouse, this.viewer.camera);
+  getPointerIntersects(mouse: Vector2): 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);
 
     const objects = [];
     this.viewer.scene.traverseVisible((child) => objects.push(child));

package/src/Viewer/draggers/OrbitDragger.ts

@@ -45,6 +45,7 @@ export class OrbitDragger implements IDisposable {
     this.viewer.on("geometryend", this.updateControls);
     this.viewer.on("viewposition", this.updateControls);
     this.viewer.on("zoom", this.updateControls);
+    this.viewer.on("drawviewpoint", this.updateControls);
     this.viewer.on("contextmenu", this.stopContextMenu);
     this.updateControls();
   }
@@ -53,6 +54,7 @@ export class OrbitDragger implements IDisposable {
     this.viewer.off("geometryend", this.updateControls);
     this.viewer.off("viewposition", this.updateControls);
     this.viewer.off("zoom", this.updateControls);
+    this.viewer.off("drawviewpoint", this.updateControls);
     this.viewer.off("contextmenu", this.stopContextMenu);
 
     this.orbit.removeEventListener("change", this.controlsChange);