@inweb/viewer-three 25.3.15

package/src/ThreejsViewer/ThreejsViewer.ts

@@ -0,0 +1,369 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { EventEmitter2 } from "@inweb/eventemitter2";
+import { Assembly, Client, File, Model } from "@inweb/client";
+import {
+  CANVAS_EVENTS,
+  commands,
+  IViewpoint,
+  IViewer,
+  Options,
+  OptionsData,
+  OptionsEventMap,
+  ViewerEventMap,
+} from "@inweb/viewer-core";
+import * as THREE from "three";
+import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { GLTFLoadingManager } from "./loaders/GLTFLoadingManager";
+
+import { PanDragger } from "./draggers/PanDragger";
+import { OrbitDragger } from "./draggers/OrbitDragger";
+import { ZoomDragger } from "./draggers/ZoomDragger";
+import { WalkDragger } from "./draggers/WalkDragger";
+import { ClippingPlaneDragger } from "./draggers/ClippingPlaneDragger";
+
+import { IComponent } from "./IComponent";
+import { LightComponent } from "./components/LightComponent";
+import { BackgroundComponent } from "./components/BackgroundComponent";
+import { DefaultCameraPositionComponent } from "./components/DefaultCameraPositionComponent";
+import { ResizeCanvasComponent } from "./components/ResizeCanvasComponent";
+import { RenderLoopComponent } from "./components/RenderLoopComponent";
+// import { ObjectSelectionComponent } from "./components/ObjectSelectionComponent";
+
+export class ThreejsViewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> implements IViewer {
+  public client: Client | undefined;
+  private _options: Options;
+
+  private canvaseventlistener: (event: any) => void;
+
+  public canvas: HTMLCanvasElement | undefined;
+  public canvasEvents: string[];
+
+  public scene: THREE.Scene | undefined;
+  public camera: THREE.PerspectiveCamera | undefined;
+  public renderer: THREE.WebGLRenderer | undefined;
+  public models: Array<GLTF>;
+  public selectedObjects: Array<any>;
+
+  private draggerFactory: Record<string, any>;
+  private _activeDragger: any;
+
+  private components: Array<IComponent>;
+
+  private renderNeeded: boolean;
+  private renderTime: DOMHighResTimeStamp;
+
+  constructor(client?: Client) {
+    super();
+    this._options = new Options(this);
+
+    this.client = client;
+
+    this.canvasEvents = CANVAS_EVENTS;
+    this.canvaseventlistener = (event: Event) => this.emit(event);
+
+    this.draggerFactory = {
+      Pan: PanDragger,
+      Zoom: ZoomDragger,
+      Orbit: OrbitDragger,
+      Walk: WalkDragger,
+      Clipping: ClippingPlaneDragger,
+    };
+    this._activeDragger = null;
+
+    this.models = [];
+    this.components = [];
+    this.selectedObjects = [];
+
+    this.renderTime = 0;
+
+    this.render = this.render.bind(this);
+    this.update = this.update.bind(this);
+  }
+
+  get options(): Options {
+    return this._options;
+  }
+
+  get draggers(): string[] {
+    return Object.keys(this.draggerFactory);
+  }
+
+  initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this> {
+    this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
+
+    this.scene = new THREE.Scene();
+
+    const rect = canvas.parentElement.getBoundingClientRect();
+    const width = rect.width || 1;
+    const height = rect.height || 1;
+    this.camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
+    this.camera.up.set(0, 0, 1);
+
+    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setSize(width, height);
+    this.renderer.toneMapping = THREE.LinearToneMapping;
+
+    this.canvas = canvas;
+    this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
+
+    this.components.push(new LightComponent(this));
+    this.components.push(new BackgroundComponent(this));
+    this.components.push(new DefaultCameraPositionComponent(this));
+    this.components.push(new ResizeCanvasComponent(this));
+    this.components.push(new RenderLoopComponent(this as any));
+    // this.components.push(new ObjectSelectionComponent(this as any));
+
+    this.options.notifierChangeEvent();
+
+    this.renderTime = performance.now();
+    this.render(this.renderTime);
+
+    if (typeof onProgress === "function")
+      onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded: 1, total: 1 }));
+
+    return Promise.resolve(this);
+  }
+
+  dispose(): this {
+    this.cancel();
+    this.emitEvent({ type: "dispose" });
+
+    this.components.forEach((component: IComponent) => component.dispose());
+    this.components = [];
+
+    this.setActiveDragger("");
+    this.removeAllListeners();
+
+    if (this.canvas) {
+      this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
+      this.canvas = undefined;
+    }
+
+    if (this.renderer) this.renderer.dispose();
+
+    this.renderer = undefined;
+    this.camera = undefined;
+    this.scene = undefined;
+
+    return this;
+  }
+
+  isInitialized(): boolean {
+    return !!this.renderer;
+  }
+
+  public render(time: DOMHighResTimeStamp): void {
+    if (!this.renderNeeded) return;
+    if (!this.renderer) return;
+
+    this.renderer.render(this.scene, this.camera);
+    this.renderNeeded = false;
+
+    const deltaTime = (time - this.renderTime) / 1000;
+    this.renderTime = time;
+    this.emitEvent({ type: "render", time, deltaTime });
+  }
+
+  public update(force = false): void {
+    this.renderNeeded = true;
+    if (force) this.render(performance.now());
+    this.emitEvent({ type: "update", data: force });
+  }
+
+  public syncOptions(options: OptionsData = this.options.data): void {
+    // this.update();
+  }
+
+  loadReferences(model: Model | File | Assembly): Promise<this> {
+    // todo: load reference as text fonts
+    return Promise.resolve(this);
+  }
+
+  async open(file: File | Assembly | Model): Promise<this> {
+    if (!this.renderer) return this;
+
+    this.cancel();
+    this.clear();
+
+    this.emitEvent({ type: "open", file, model: file });
+
+    let model: Model;
+
+    if (file) {
+      const models = (await file.getModels()) || [];
+      model = models.find((model: Model) => model.default) || models[0];
+    }
+    if (!model) throw new Error("No default model found");
+
+    const geometryType = model.database.split(".").pop();
+    if (geometryType !== "gltf") throw new Error(`Unknown geometry type: ${geometryType}`);
+
+    const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
+    const params = { requestHeader: model.httpClient.headers };
+
+    await this.loadReferences(model);
+    await this.loadGltfFile(url, undefined, params);
+
+    return this;
+  }
+
+  cancel(): this {
+    this.emitEvent({ type: "cancel" });
+    return this;
+  }
+
+  openGltfFile(
+    file: string | ArrayBuffer | Blob,
+    externalData: Map<string, string | ArrayBuffer | Blob> = new Map(),
+    params: {
+      path?: string;
+      requestHeader?: HeadersInit;
+      crossOrigin?: string;
+      withCredentials?: boolean;
+    } = {}
+  ): Promise<this> {
+    if (!this.renderer) return Promise.resolve(this);
+
+    this.cancel();
+    this.clear();
+
+    this.emitEvent({ type: "open" });
+
+    return this.loadGltfFile(file, externalData, params);
+  }
+
+  async loadGltfFile(
+    file: string | ArrayBuffer | Blob,
+    externalData: Map<string, string | ArrayBuffer | Blob> = new Map(),
+    params: {
+      path?: string;
+      requestHeader?: HeadersInit;
+      crossOrigin?: string;
+      withCredentials?: boolean;
+    } = {}
+  ): Promise<this> {
+    const manager = new GLTFLoadingManager(file, externalData, params);
+    try {
+      this.emitEvent({ type: "geometrystart" });
+
+      const loader = new GLTFLoader(manager);
+      loader.setPath(manager.path);
+      loader.setRequestHeader(params.requestHeader as any);
+      loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
+      loader.setWithCredentials(params.withCredentials || loader.withCredentials);
+
+      const gltf = await loader.loadAsync(manager.fileURL, (event: ProgressEvent) => {
+        const { lengthComputable, loaded, total } = event;
+        const progress = lengthComputable ? loaded / total : 1;
+        this.emitEvent({ type: "geometryprogress", data: progress });
+      });
+
+      if (!this.scene) return this;
+      if (!gltf.scene) throw new Error("No glTF scene found");
+
+      this.models.push(gltf);
+      this.scene.add(gltf.scene);
+      this.update();
+
+      this.emitEvent({ type: "databasechunk" });
+      this.emitEvent({ type: "geometryend", data: gltf.scene });
+    } catch (error) {
+      this.emitEvent({ type: "geometryerror", data: error });
+      throw error;
+    } finally {
+      manager.dispose();
+    }
+
+    return this;
+  }
+
+  clear(): this {
+    function disposeMaterial(material: any) {
+      const materials = Array.isArray(material) ? material : [material];
+      materials.forEach((material: any) => {
+        // Object.keys(material).forEach((key) => material[key]?.dispose?.());
+        material.dispose();
+      });
+    }
+
+    function disposeObject(object: any) {
+      if (object.geometry) object.geometry.dispose();
+      if (object.material) disposeMaterial(object.material);
+    }
+
+    this.selectedObjects = [];
+
+    this.models.forEach((gltf) => gltf.scene.traverse(disposeObject));
+    this.models.forEach((gltf) => gltf.scene.removeFromParent());
+    this.models = [];
+
+    this.update();
+    this.emitEvent({ type: "clear" });
+
+    return this;
+  }
+
+  activeDragger(): any | null {
+    return this._activeDragger;
+  }
+
+  setActiveDragger(name: string): any {
+    if (!this._activeDragger || this._activeDragger.name !== name) {
+      if (this._activeDragger) {
+        this._activeDragger.dispose();
+        this._activeDragger = null;
+      }
+      const Constructor = this.draggerFactory[name];
+      if (Constructor) {
+        this._activeDragger = new Constructor(this);
+        this._activeDragger.name = name;
+      }
+    }
+    return this._activeDragger;
+  }
+
+  resetActiveDragger(): void {
+    const dragger = this._activeDragger;
+    if (dragger) {
+      this.setActiveDragger("");
+      this.setActiveDragger(dragger.name);
+    }
+  }
+
+  is3D(): boolean {
+    return false;
+  }
+
+  executeCommand(id: string, ...args: any[]): any {
+    return commands("ThreeJS").executeCommand(id, this, ...args);
+  }
+
+  drawViewpoint(viewpoint: IViewpoint): void {}
+
+  createViewpoint(): IViewpoint {
+    return {};
+  }
+}

package/src/ThreejsViewer/components/BackgroundComponent.ts

@@ -0,0 +1,57 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
+import { IComponent } from "../IComponent";
+import type { ThreejsViewer } from "../ThreejsViewer";
+
+export class BackgroundComponent implements IComponent {
+  protected viewer: ThreejsViewer;
+  protected backgroundColor: THREE.Color;
+
+  constructor(viewer: ThreejsViewer) {
+    this.viewer = viewer;
+
+    this.backgroundColor = new THREE.Color(0xffffff);
+
+    const environment = new RoomEnvironment();
+    const pmremGenerator = new THREE.PMREMGenerator(this.viewer.renderer);
+
+    this.viewer.scene.background = this.backgroundColor;
+    this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
+    this.viewer.addEventListener("optionschange", this.syncOptions);
+
+    environment.dispose();
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("optionschange", this.syncOptions);
+    this.viewer.scene.environment = undefined;
+    this.viewer.scene.background = undefined;
+  }
+
+  syncOptions = () => {
+    this.backgroundColor.setHex(0xffffff);
+  };
+}

package/src/ThreejsViewer/components/DefaultCameraPositionComponent.ts

@@ -0,0 +1,66 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { GeometryEndEvent } from "@inweb/viewer-core";
+import * as THREE from "three";
+import { IComponent } from "../IComponent";
+import type { ThreejsViewer } from "../ThreejsViewer";
+
+export class DefaultCameraPositionComponent implements IComponent {
+  protected viewer: ThreejsViewer;
+
+  constructor(viewer: ThreejsViewer) {
+    this.viewer = viewer;
+    this.viewer.addEventListener("geometryend", this.geometryEnd);
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+  }
+
+  geometryEnd = (event: GeometryEndEvent) => {
+    const { data: scene } = event;
+
+    scene.updateMatrixWorld();
+
+    const box = new THREE.Box3().setFromObject(scene);
+    const size = box.getSize(new THREE.Vector3()).length();
+    const center = box.getCenter(new THREE.Vector3());
+
+    scene.position.x += scene.position.x - center.x;
+    scene.position.y += scene.position.y - center.y;
+    scene.position.z += scene.position.z - center.z;
+
+    this.viewer.camera.near = size / 100;
+    this.viewer.camera.far = size * 100;
+
+    this.viewer.camera.position.copy(center);
+    this.viewer.camera.position.x += size / 2.0;
+    this.viewer.camera.position.y += size / 5.0;
+    this.viewer.camera.position.z += size / 2.0;
+
+    this.viewer.camera.updateMatrixWorld();
+    this.viewer.camera.updateProjectionMatrix();
+    this.viewer.camera.lookAt(center);
+  };
+}

package/src/ThreejsViewer/components/LightComponent.ts

@@ -0,0 +1,48 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { ThreejsViewer } from "../ThreejsViewer";
+
+export class LightComponent implements IComponent {
+  protected viewer: ThreejsViewer;
+  protected ambientLight: THREE.AmbientLight;
+  protected directLight: THREE.DirectionalLight;
+
+  constructor(viewer: ThreejsViewer) {
+    this.viewer = viewer;
+
+    this.ambientLight = new THREE.AmbientLight(0xffffff, 0);
+    this.viewer.camera.add(this.ambientLight);
+
+    this.directLight = new THREE.DirectionalLight(0xffffff, 1);
+    this.directLight.position.set(0.5, 0, 0.866); // ~60º
+    this.viewer.camera.add(this.directLight);
+  }
+
+  dispose() {
+    this.ambientLight.removeFromParent();
+    this.directLight.removeFromParent();
+  }
+}

package/src/ThreejsViewer/components/ObjectSelectionComponent.ts

@@ -0,0 +1,105 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { ThreejsViewer } from "../ThreejsViewer";
+
+export class ObjectSelectionComponent implements IComponent {
+  protected viewer: ThreejsViewer;
+  protected raycaster: THREE.Raycaster;
+  protected mouse: THREE.Vector2;
+  protected selectionMaterial: THREE.MeshBasicMaterial;
+
+  constructor(viewer: ThreejsViewer) {
+    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() {
+    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;
+      }
+    }
+  }
+}