@inweb/viewer-three 26.2.1 → 26.2.3

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

@@ -7,4 +7,5 @@ export declare class LightComponent implements IComponent {
     protected directionalLight: DirectionalLight;
     constructor(viewer: Viewer);
     dispose(): void;
+    geometryEnd: () => void;
 }

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

@@ -0,0 +1,9 @@
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+export declare class LightHelperComponent implements IComponent {
+    private viewer;
+    private lightHelpers;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    geometryEnd: () => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.2.1",
+  "version": "26.2.3",
   "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",
@@ -28,10 +28,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.2.1",
-    "@inweb/eventemitter2": "~26.2.1",
-    "@inweb/markup": "~26.2.1",
-    "@inweb/viewer-core": "~26.2.1"
+    "@inweb/client": "~26.2.3",
+    "@inweb/eventemitter2": "~26.2.3",
+    "@inweb/markup": "~26.2.3",
+    "@inweb/viewer-core": "~26.2.3"
   },
   "devDependencies": {
     "@types/three": "^0.173.0",

package/src/Viewer/components/AxesHelperComponent.ts

@@ -41,10 +41,10 @@ export class AxesHelperComponent implements IComponent {
 
   dispose() {
     this.axesHelper1.removeFromParent();
-    this.axesHelper1 = undefined;
+    this.axesHelper1.dispose();
 
     this.axesHelper2.removeFromParent();
-    this.axesHelper2 = undefined;
+    this.axesHelper2.dispose();
 
     this.viewer.removeEventListener("geometryend", this.geometryEnd);
     this.viewer.removeEventListener("clear", this.geometryEnd);
@@ -52,19 +52,22 @@ export class AxesHelperComponent implements IComponent {
 
   geometryEnd = () => {
     this.axesHelper1.removeFromParent();
+    this.axesHelper1.dispose();
+
     this.axesHelper2.removeFromParent();
+    this.axesHelper2.dispose();
+
+    if (this.viewer.extents.isEmpty()) return;
 
-    if (!this.viewer.extents.isEmpty()) {
-      const size = this.viewer.extents.getSize(new Vector3()).length();
-      const center = this.viewer.extents.getCenter(new Vector3());
+    const size = this.viewer.extents.getSize(new Vector3()).length();
+    const center = this.viewer.extents.getCenter(new Vector3());
 
-      this.axesHelper1 = new AxesHelper(size);
-      this.axesHelper1.position.copy(center);
-      this.viewer.helpers.add(this.axesHelper1);
+    this.axesHelper1 = new AxesHelper(size);
+    this.axesHelper1.position.copy(center);
+    this.viewer.helpers.add(this.axesHelper1);
 
-      this.axesHelper2 = new AxesHelper(size);
-      this.axesHelper2.position.set(0, 0, 0);
-      this.viewer.helpers.add(this.axesHelper2);
-    }
+    this.axesHelper2 = new AxesHelper(size);
+    this.axesHelper2.position.set(0, 0, 0);
+    this.viewer.helpers.add(this.axesHelper2);
   };
 }

package/src/Viewer/components/ExtentsHelperComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, Box3Helper, Color } from "three";
+import { Box3, Box3Helper } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -31,7 +31,7 @@ export class ExtentsHelperComponent implements IComponent {
   private boxHelper: Box3Helper;
 
   constructor(viewer: Viewer) {
-    this.boxHelper = new Box3Helper(new Box3());
+    this.boxHelper = new Box3Helper(new Box3(), "#ff0000");
     this.viewer = viewer;
     this.viewer.on("geometryend", this.geometryEnd);
     this.viewer.on("explode", this.geometryEnd);
@@ -40,7 +40,7 @@ export class ExtentsHelperComponent implements IComponent {
 
   dispose() {
     this.boxHelper.removeFromParent();
-    this.boxHelper = undefined;
+    this.boxHelper.dispose();
 
     this.viewer.off("geometryend", this.geometryEnd);
     this.viewer.off("explode", this.geometryEnd);
@@ -50,9 +50,9 @@ export class ExtentsHelperComponent implements IComponent {
   geometryEnd = () => {
     this.boxHelper.removeFromParent();
 
-    if (!this.viewer.extents.isEmpty()) {
-      this.boxHelper = new Box3Helper(this.viewer.extents, new Color(0xff0000));
-      this.viewer.helpers.add(this.boxHelper);
-    }
+    if (this.viewer.extents.isEmpty()) return;
+
+    this.boxHelper.box = this.viewer.extents.clone();
+    this.viewer.helpers.add(this.boxHelper);
   };
 }

package/src/Viewer/components/LightComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { AmbientLight, DirectionalLight } from "three";
+import { AmbientLight, DirectionalLight, Sphere } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -35,18 +35,37 @@ export class LightComponent implements IComponent {
     this.viewer = viewer;
 
     this.ambientLight = new AmbientLight(0xffffff, 0);
-    this.viewer.camera.add(this.ambientLight);
+    this.viewer.scene.add(this.ambientLight);
 
     this.directionalLight = new DirectionalLight(0xffffff, 1);
     this.directionalLight.position.set(0.5, 0, 0.866); // ~60º
-    this.viewer.camera.add(this.directionalLight);
+    this.viewer.scene.add(this.directionalLight);
+
+    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.viewer.addEventListener("clear", this.geometryEnd);
   }
 
   dispose(): void {
     this.ambientLight.removeFromParent();
-    this.ambientLight = undefined;
+    this.ambientLight.dispose();
 
     this.directionalLight.removeFromParent();
-    this.directionalLight = undefined;
+    this.directionalLight.dispose();
+
+    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    this.viewer.removeEventListener("clear", this.geometryEnd);
   }
+
+  geometryEnd = () => {
+    this.ambientLight.removeFromParent();
+    this.directionalLight.removeFromParent();
+
+    if (this.viewer.extents.isEmpty()) return;
+
+    const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
+    this.directionalLight.position.set(0.5, 0, 0.866).multiplyScalar(extentsSize * 2);
+
+    this.viewer.scene.add(this.ambientLight);
+    this.viewer.scene.add(this.directionalLight);
+  };
 }

package/src/Viewer/components/LightHelperComponent.ts

@@ -0,0 +1,69 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { DirectionalLightHelper, Sphere } from "three";
+
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class LightHelperComponent implements IComponent {
+  private viewer: Viewer;
+  private lightHelpers: DirectionalLightHelper[];
+
+  constructor(viewer: Viewer) {
+    this.lightHelpers = [];
+    this.viewer = viewer;
+    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.viewer.addEventListener("clear", this.geometryEnd);
+  }
+
+  dispose() {
+    this.lightHelpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+    this.lightHelpers.length = 0;
+
+    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    this.viewer.removeEventListener("clear", this.geometryEnd);
+  }
+
+  geometryEnd = () => {
+    this.lightHelpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+    this.lightHelpers.length = 0;
+
+    const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
+    const size = extentsSize / 10;
+
+    this.viewer.scene.traverse((object: any) => {
+      if (object.isDirectionalLight) {
+        const helper = new DirectionalLightHelper(object, size, "#aa0000");
+        this.lightHelpers.push(helper);
+        this.viewer.helpers.add(helper);
+      }
+    });
+  };
+}

package/src/Viewer/components/index.ts

@@ -28,11 +28,11 @@ import { BackgroundComponent } from "./BackgroundComponent";
 import { CameraComponent } from "./CameraComponent";
 import { ExtentsComponent } from "./ExtentsComponent";
 // import { ExtentsHelperComponent } from "./ExtentsHelperComponent";
-import { LightComponent } from "./LightComponent";
+// import { LightComponent } from "./LightComponent";
+// import { LightHelperComponent } from "./LightHelperComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
 import { SelectionComponent } from "./SelectionComponent";
-// import { ViewPositionComponent } from "./ViewPositionComponent";
 import { WCSHelperComponent } from "./WCSHelperComponent";
 
 /**
@@ -78,14 +78,14 @@ export const components: IComponentsRegistry = componentsRegistry("threejs");
 // build-in components
 
 components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponent(viewer));
-components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
-components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
+components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
+// components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
 components.registerComponent("SelectionComponent", (viewer) => new SelectionComponent(viewer));
-components.registerComponent("WCSHelperComponent", (viewer) => new WCSHelperComponent(viewer));
 
+components.registerComponent("WCSHelperComponent", (viewer) => new WCSHelperComponent(viewer));
 // components.registerComponent("AxesHelperComponent", (viewer) => new AxesHelperComponent(viewer));
 // components.registerComponent("ExtentsHelperComponent", (viewer) => new ExtentsHelperComponent(viewer));
-// components.registerComponent("ViewPositionComponent", (viewer) => new ViewPositionComponent(viewer));
+// components.registerComponent("LightHelperComponent", (viewer) => new LightHelperComponent(viewer));