@inweb/viewer-three 25.9.8 → 25.10.0

package/src/Viewer/helpers/PlaneHelper.ts

@@ -0,0 +1,99 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 {
+  BufferGeometry,
+  DoubleSide,
+  Float32BufferAttribute,
+  Line,
+  LineBasicMaterial,
+  Mesh,
+  MeshBasicMaterial,
+  Object3D,
+  Plane,
+  Vector3,
+} from "three";
+
+class PlaneHelper extends Line {
+  public plane: Plane;
+  public size: number;
+  public offset: Vector3;
+  public helper: Object3D;
+
+  constructor(plane: Plane, size = 1, color = 0xffff00, offset: Vector3 = new Vector3()) {
+    // const positions = [1, -1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
+    const positions = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
+
+    const geometry = new BufferGeometry();
+    geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+    geometry.computeBoundingSphere();
+
+    super(geometry, new LineBasicMaterial({ color, toneMapped: false }));
+
+    (this as any).type = "PlaneHelper";
+
+    this.plane = plane;
+    this.size = size;
+    this.offset = offset;
+
+    const positions2 = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0];
+
+    const geometry2 = new BufferGeometry();
+    geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
+    geometry2.computeBoundingSphere();
+
+    this.helper = new Mesh(
+      geometry2,
+      new MeshBasicMaterial({
+        color,
+        opacity: 0.2,
+        transparent: true,
+        depthWrite: false,
+        toneMapped: false,
+        side: DoubleSide,
+      })
+    );
+    this.add(this.helper);
+  }
+
+  dispose() {
+    this.geometry.dispose();
+    (this.material as any).dispose();
+    (this.children[0] as any).geometry.dispose();
+    (this.children[0] as any).material.dispose();
+  }
+
+  override updateMatrixWorld(force: boolean) {
+    this.position.set(0, 0, 0);
+    this.lookAt(this.plane.normal);
+
+    this.position.copy(this.offset);
+    this.translateZ(-(this.offset.dot(this.plane.normal) + this.plane.constant));
+
+    this.scale.set(0.5 * this.size, 0.5 * this.size, 1);
+
+    super.updateMatrixWorld(force);
+  }
+}
+
+export { PlaneHelper };

package/src/Viewer/helpers/WCSHelper.ts

@@ -0,0 +1,119 @@
+import {
+  Camera,
+  CylinderGeometry,
+  CanvasTexture,
+  Color,
+  Mesh,
+  MeshBasicMaterial,
+  Object3D,
+  OrthographicCamera,
+  Sprite,
+  SpriteMaterial,
+  SRGBColorSpace,
+  Vector4,
+  WebGLRenderer,
+} from "three";
+
+export class WCSHelper extends Object3D {
+  private camera: Camera;
+  private orthoCamera: OrthographicCamera;
+  public size: number;
+
+  constructor(camera: Camera) {
+    super();
+
+    this.camera = camera;
+    this.size = 160;
+
+    this.orthoCamera = new OrthographicCamera(-2, 2, 2, -2, 0, 4);
+    this.orthoCamera.position.set(0, 0, 2);
+
+    const matRed = new MeshBasicMaterial({ toneMapped: false, color: "#aa0000" });
+    const matGreen = new MeshBasicMaterial({ toneMapped: false, color: "#00aa00" });
+    const matBlue = new MeshBasicMaterial({ toneMapped: false, color: "#0000aa" });
+
+    const spriteRed = this.getSpriteMaterial(matRed.color, "X");
+    const spriteGreen = this.getSpriteMaterial(matGreen.color, "Y");
+    const spriteBlue = this.getSpriteMaterial(matBlue.color, "Z");
+
+    const lineGeometry = new CylinderGeometry(0.01, 0.01, 1, 3);
+    lineGeometry.translate(0, 0.5, 0);
+
+    const arrowGeometry = new CylinderGeometry(0, 0.1, 0.25, 12);
+    arrowGeometry.translate(0, 0.625, 0);
+
+    const axesMap = {
+      X: [
+        [new Mesh(arrowGeometry, matRed), [0.5, 0, 0], [0, 0, -Math.PI / 2]],
+        [new Mesh(lineGeometry, matRed), [0, 0, 0], [0, 0, -Math.PI / 2]],
+        [new Sprite(spriteRed), [1.55, 0, 0]],
+      ],
+      Y: [
+        [new Mesh(arrowGeometry, matGreen), [0, 0.5, 0], null],
+        [new Mesh(lineGeometry, matGreen), null, null],
+        [new Sprite(spriteGreen), [0, 1.55, 0]],
+      ],
+      Z: [
+        [new Mesh(arrowGeometry, matBlue), [0, 0, 0.5], [Math.PI / 2, 0, 0]],
+        [new Mesh(lineGeometry, matBlue), null, [Math.PI / 2, 0, 0]],
+        [new Sprite(spriteBlue), [0, 0, 1.55]],
+      ],
+    };
+
+    Object.keys(axesMap).forEach((key) => {
+      axesMap[key].forEach((objects: any) => {
+        const object = objects[0];
+        const position = objects[1];
+        const rotation = objects[2];
+
+        object.name = key;
+        if (position) object.position.set(position[0], position[1], position[2]);
+        if (rotation) object.rotation.set(rotation[0], rotation[1], rotation[2]);
+        object.updateMatrixWorld();
+
+        this.add(object);
+      });
+    });
+  }
+
+  dispose() {
+    this.traverse((object: any) => {
+      if (object.geometry) object.geometry.dispose();
+      if (object.material) object.material.dispose();
+    });
+  }
+
+  getSpriteMaterial(color: Color, text: string) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 64;
+    canvas.height = 64;
+
+    const context = canvas.getContext("2d");
+    context.clearRect(0, 0, 64, 64);
+    context.font = "24px Arial";
+    context.textAlign = "center";
+    context.fillStyle = color.getStyle();
+    context.fillText(text, 32, 41);
+
+    const texture = new CanvasTexture(canvas);
+    texture.colorSpace = SRGBColorSpace;
+
+    return new SpriteMaterial({ map: texture, toneMapped: false });
+  }
+
+  render(renderer: WebGLRenderer) {
+    this.quaternion.copy(this.camera.quaternion).invert();
+    this.updateMatrixWorld();
+
+    const clippingPlanes = renderer.clippingPlanes;
+    const viewport = renderer.getViewport(new Vector4());
+
+    renderer.setViewport(this.position.x, this.position.y, this.size, this.size);
+    renderer.clippingPlanes = [];
+    renderer.clearDepth();
+    renderer.render(this, this.orthoCamera);
+
+    renderer.setViewport(viewport);
+    renderer.clippingPlanes = clippingPlanes;
+  }
+}

package/src/Viewer/loaders/GLTFLoadingManager.ts

@@ -21,17 +21,17 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import * as THREE from "three";
+import { LoadingManager, LoaderUtils } from "three";
 
-export class GLTFLoadingManager extends THREE.LoadingManager {
+export class GLTFLoadingManager extends LoadingManager {
   public path = "";
   public resourcePath = "";
   public fileURL = "";
   public dataURLs = new Map();
 
   constructor(
-    file: string | ArrayBuffer | Blob,
-    externalData: Map<string, string | ArrayBuffer | Blob> = new Map(),
+    file: string | globalThis.File | ArrayBuffer | Blob,
+    externalData: Map<string, string | File | ArrayBuffer | Blob> = new Map(),
     params: { path?: string } = {}
   ) {
     super();
@@ -40,7 +40,7 @@ export class GLTFLoadingManager extends THREE.LoadingManager {
 
     if (typeof file === "string") {
       this.fileURL = file;
-      this.resourcePath = THREE.LoaderUtils.extractUrlBase(file);
+      this.resourcePath = LoaderUtils.extractUrlBase(file);
     } else {
       externalData.forEach((value, key) => (this.fileURL = value === file ? key : this.fileURL));
       externalData.set(this.fileURL, file);
@@ -63,7 +63,7 @@ export class GLTFLoadingManager extends THREE.LoadingManager {
     });
   }
 
-  dispose(): void {
+  dispose() {
     this.dataURLs.forEach(URL.revokeObjectURL);
   }
 }

package/src/index.ts

@@ -21,5 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
+import "./Viewer/commands";
+
 export * from "@inweb/viewer-core";
 export { Viewer } from "./Viewer/Viewer";

package/lib/Viewer/IComponent.d.ts

@@ -1,3 +0,0 @@
-export interface IComponent {
-    dispose(): void;
-}

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

@@ -1,16 +0,0 @@
-import * as THREE from "three";
-import { IComponent } from "../IComponent";
-import type { Viewer } from "../Viewer";
-export declare class ObjectSelectionComponent implements IComponent {
-    protected viewer: Viewer;
-    protected raycaster: THREE.Raycaster;
-    protected mouse: THREE.Vector2;
-    protected selectionMaterial: THREE.MeshBasicMaterial;
-    constructor(viewer: Viewer);
-    dispose(): void;
-    onPointerUp: (event: PointerEvent) => void;
-    onPointerDown: (event: PointerEvent) => void;
-    clearSelection(): void;
-    setSelectObject(object: any, selected: any): void;
-    highlightObject(object: any, enable: any): void;
-}

package/lib/Viewer/draggers/ClippingPlaneDragger.d.ts

@@ -1,17 +0,0 @@
-import * as THREE from "three";
-export declare class ClippingPlaneDragger {
-    protected viewer: any;
-    protected start: THREE.Vector3;
-    protected end: THREE.Vector3;
-    protected delta: THREE.Vector3;
-    protected planeHelper: THREE.PlaneHelper;
-    plane: THREE.Plane;
-    constructor(viewer: any);
-    dispose(): void;
-    onPointerDown: (event: PointerEvent) => void;
-    onPointerUp: (event: PointerEvent) => void;
-    onPointerMove: (event: PointerEvent) => void;
-    update(): void;
-    screenToWorld(v: THREE.Vector3): THREE.Vector3;
-    screenToPlane(v: THREE.Vector3): THREE.Vector3;
-}

package/src/Viewer/IComponent.ts

@@ -1,3 +0,0 @@
-export interface IComponent {
-  dispose(): void;
-}

package/src/Viewer/components/ObjectSelectionComponent.ts

@@ -1,105 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2002-2024, 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-2024 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 * as THREE from "three";
-import { IComponent } from "../IComponent";
-import type { Viewer } from "../Viewer";
-
-export class ObjectSelectionComponent implements IComponent {
-  protected viewer: Viewer;
-  protected raycaster: THREE.Raycaster;
-  protected mouse: THREE.Vector2;
-  protected selectionMaterial: THREE.MeshBasicMaterial;
-
-  constructor(viewer: Viewer) {
-    this.viewer = viewer;
-    this.raycaster = new THREE.Raycaster();
-    this.mouse = new THREE.Vector2();
-    this.selectionMaterial = new THREE.MeshBasicMaterial({ color: "red" });
-
-    this.viewer.addEventListener("pointerdown", this.onPointerDown);
-    this.viewer.addEventListener("pointerup", this.onPointerUp);
-  }
-
-  dispose(): void {
-    this.viewer.removeEventListener("pointerdown", this.onPointerDown);
-    this.viewer.removeEventListener("pointerup", this.onPointerUp);
-  }
-
-  onPointerUp = (event: PointerEvent) => {
-    const x = (event.offsetX / this.viewer.canvas.clientWidth) * 2 - 1;
-    const y = -(event.offsetY / this.viewer.canvas.clientHeight) * 2 + 1;
-
-    if (this.mouse.x === x && this.mouse.y === y) {
-      this.raycaster.setFromCamera(this.mouse, this.viewer.camera);
-      const intersects = this.raycaster.intersectObjects(this.viewer.scene.children, true);
-      this.clearSelection();
-      if (intersects.length > 0) {
-        const object = intersects[0].object as THREE.Mesh;
-        this.setSelectObject(object, true);
-      }
-    }
-  };
-
-  onPointerDown = (event: PointerEvent) => {
-    this.mouse.x = (event.offsetX / this.viewer.canvas.clientWidth) * 2 - 1;
-    this.mouse.y = -(event.offsetY / this.viewer.canvas.clientHeight) * 2 + 1;
-  };
-
-  clearSelection() {
-    this.viewer.selectedObjects.forEach((object) => this.setSelectObject(object, false));
-    this.viewer.selectedObjects.length = 0;
-  }
-
-  setSelectObject(object, selected) {
-    if (selected) {
-      const index = this.viewer.selectedObjects.findIndex((o) => o === object);
-      if (index === -1) {
-        this.viewer.selectedObjects.push(object);
-        this.highlightObject(object, true);
-        this.viewer.emit("selectobject", object);
-      }
-    } else {
-      const index = this.viewer.selectedObjects.findIndex((o) => o === object);
-      if (index !== -1) {
-        this.viewer.selectedObjects.splice(index, 1);
-        this.highlightObject(object, false);
-        this.viewer.emit("deselectobject", object);
-      }
-    }
-  }
-
-  highlightObject(object, enable) {
-    if (enable) {
-      if (!object.originalMaterial) {
-        object.originalMaterial = object.material;
-        object.material = this.selectionMaterial;
-      }
-    } else {
-      if (object.originalMaterial) {
-        object.material = object.originalMaterial;
-        delete object.originalMaterial;
-      }
-    }
-  }
-}

package/src/Viewer/draggers/ClippingPlaneDragger.ts

@@ -1,120 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2002-2024, 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-2024 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 * as THREE from "three";
-
-export class ClippingPlaneDragger {
-  protected viewer: any;
-  protected start: THREE.Vector3;
-  protected end: THREE.Vector3;
-  protected delta: THREE.Vector3;
-  protected planeHelper: THREE.PlaneHelper;
-
-  public plane: THREE.Plane;
-
-  constructor(viewer: any) {
-    this.viewer = viewer;
-
-    this.viewer.addEventListener("pointerdown", this.onPointerDown);
-    this.viewer.addEventListener("pointerup", this.onPointerUp);
-
-    this.plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
-
-    this.start = new THREE.Vector3();
-    this.end = new THREE.Vector3();
-    this.delta = new THREE.Vector3();
-    if (!this.viewer.renderer.clippingPlanes) this.viewer.renderer.clippingPlanes = [];
-
-    this.viewer.renderer.clippingPlanes.push(this.plane);
-
-    this.planeHelper = new THREE.PlaneHelper(this.plane, 150, 0xffff00);
-    this.viewer.scene.add(this.planeHelper);
-  }
-
-  dispose(): void {
-    this.viewer.removeEventListener("pointerdown", this.onPointerDown);
-    this.viewer.removeEventListener("pointerup", this.onPointerUp);
-    this.viewer.removeEventListener("pointermove", this.onPointerMove);
-
-    this.viewer.renderer.clippingPlanes = this.viewer.renderer.clippingPlanes.filter((plane) => this.plane !== plane);
-
-    this.planeHelper.removeFromParent();
-  }
-
-  onPointerDown = (event: PointerEvent) => {
-    this.viewer.addEventListener("pointermove", this.onPointerMove);
-
-    const { offsetX, offsetY } = event;
-    this.start.set(offsetX, offsetY, 0.5);
-    this.start = this.screenToPlane(this.start);
-    this.delta.set(0, 0, 0);
-    this.end.set(0, 0, 0);
-  };
-
-  onPointerUp = (event: PointerEvent) => {
-    this.viewer.removeEventListener("pointermove", this.onPointerMove);
-
-    if (this.end.length() === 0) {
-      const plane: THREE.Plane = this.plane;
-      plane.normal.multiplyScalar(-1);
-      plane.constant *= -1;
-    } else {
-      const { offsetX, offsetY } = event;
-      this.end.set(offsetX, offsetY, 0.5);
-      this.end = this.screenToPlane(this.end);
-    }
-  };
-
-  onPointerMove = (event: PointerEvent) => {
-    const { offsetX, offsetY } = event;
-    this.end.set(offsetX, offsetY, 0.5);
-    this.end = this.screenToPlane(this.end);
-    this.delta.copy(this.end).sub(this.start);
-    this.start.copy(this.end);
-
-    const plane: THREE.Plane = this.plane;
-    plane.translate(this.delta);
-  };
-
-  update(): void {}
-
-  screenToWorld(v: THREE.Vector3): THREE.Vector3 {
-    v.x = (2 * v.x) / this.viewer.canvas.clientWidth - 1;
-    v.y = 1 - (2 * v.y) / this.viewer.canvas.clientHeight;
-    return v.unproject(this.viewer.camera);
-  }
-
-  screenToPlane(v: THREE.Vector3): THREE.Vector3 {
-    v = this.screenToWorld(v);
-    const direction = v.sub(this.viewer.camera.position).normalize();
-    const ray = new THREE.Ray(this.viewer.camera.position, direction);
-    let plane: THREE.Plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-    const dot = plane.normal.dot(this.plane.normal);
-    if (Math.abs(dot) === 1) {
-      plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0);
-    }
-    const result = new THREE.Vector3();
-    ray.intersectPlane(plane, result);
-    return result;
-  }
-}