@inweb/viewer-three 26.4.1 → 26.4.2

package/lib/Viewer/commands/index.d.ts

@@ -1,6 +1,6 @@
 import { ICommandsRegistry } from "@inweb/viewer-core";
 /**
- * A commands registry. Use this registry to register custom commands.
+ * Viewer commands registry. Use this registry to register custom commands.
  *
  * To implement custom command:
  *

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

@@ -0,0 +1,7 @@
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+export declare class RoomEnvironmentComponent implements IComponent {
+    protected viewer: Viewer;
+    constructor(viewer: Viewer);
+    dispose(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.4.1",
+  "version": "26.4.2",
   "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.4.1",
-    "@inweb/eventemitter2": "~26.4.1",
-    "@inweb/markup": "~26.4.1",
-    "@inweb/viewer-core": "~26.4.1"
+    "@inweb/client": "~26.4.2",
+    "@inweb/eventemitter2": "~26.4.2",
+    "@inweb/markup": "~26.4.2",
+    "@inweb/viewer-core": "~26.4.2"
   },
   "devDependencies": {
     "@types/three": "^0.173.0",

package/src/Viewer/commands/index.ts

@@ -47,7 +47,7 @@ import { zoomToObjects } from "./ZoomToObjects";
 import { zoomToSelected } from "./ZoomToSelected";
 
 /**
- * A commands registry. Use this registry to register custom commands.
+ * Viewer commands registry. Use this registry to register custom commands.
  *
  * To implement custom command:
  *

package/src/Viewer/components/BackgroundComponent.ts

@@ -21,8 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Color, PMREMGenerator } from "three";
-import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
+import { Color } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -36,20 +35,13 @@ export class BackgroundComponent implements IComponent {
 
     this.backgroundColor = new Color(0xffffff);
 
-    const environment = new RoomEnvironment();
-    const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
-
     this.viewer.renderer.setClearColor(this.backgroundColor);
     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;
   }
 

package/src/Viewer/components/CameraComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Sphere, Vector2 } from "three";
+import { Sphere, Vector2, Vector3 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -39,10 +39,12 @@ export class CameraComponent implements IComponent {
   }
 
   geometryEnd = () => {
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
     const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
     const rendererSize = this.viewer.renderer.getSize(new Vector2());
     const aspect = rendererSize.x / rendererSize.y;
 
+    // TODO: do not change the camera and target after opening the second model in "append" mode
     let sceneCamera: any;
     this.viewer.scene.traverse((object: any) => {
       if (object.isCamera)
@@ -71,6 +73,8 @@ export class CameraComponent implements IComponent {
       camera.updateProjectionMatrix();
     }
 
+    this.viewer.target.copy(extentsCenter);
+
     if (!sceneCamera) {
       this.viewer.executeCommand("setDefaultViewPosition");
     }

package/src/Viewer/components/ExtentsComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, Vector3 } from "three";
+import { Box3 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -53,6 +53,5 @@ export class ExtentsComponent implements IComponent {
     this.viewer.scene.traverseVisible((object) => !object.children.length && extents.expandByObject(object));
 
     this.viewer.extents.copy(extents);
-    this.viewer.target.copy(extents.getCenter(new Vector3()));
   };
 }

package/src/Viewer/components/LightComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { AmbientLight, DirectionalLight, Sphere } from "three";
+import { AmbientLight, DirectionalLight, Sphere, Vector3 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -41,7 +41,7 @@ export class LightComponent implements IComponent {
     this.directionalLight.position.set(0.5, 0, 0.866); // ~60º
     this.viewer.scene.add(this.directionalLight);
 
-    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.viewer.addEventListener("databasechunk", this.geometryEnd);
     this.viewer.addEventListener("clear", this.geometryEnd);
   }
 
@@ -52,7 +52,7 @@ export class LightComponent implements IComponent {
     this.directionalLight.removeFromParent();
     this.directionalLight.dispose();
 
-    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    this.viewer.removeEventListener("databasechunk", this.geometryEnd);
     this.viewer.removeEventListener("clear", this.geometryEnd);
   }
 
@@ -62,8 +62,10 @@ export class LightComponent implements IComponent {
 
     if (this.viewer.extents.isEmpty()) return;
 
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
     const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
-    this.directionalLight.position.set(0.5, 0, 0.866).multiplyScalar(extentsSize * 2);
+    this.directionalLight.position.set(0.5, 0, 0.866).multiplyScalar(extentsSize).add(extentsCenter);
+    this.directionalLight.target.position.copy(extentsCenter);
 
     this.viewer.scene.add(this.ambientLight);
     this.viewer.scene.add(this.directionalLight);

package/src/Viewer/components/RoomEnvironmentComponent.ts

@@ -0,0 +1,47 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { PMREMGenerator } from "three";
+import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
+
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class RoomEnvironmentComponent implements IComponent {
+  protected viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+
+    const environment = new RoomEnvironment();
+    const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
+
+    this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
+
+    environment.dispose();
+  }
+
+  dispose() {
+    this.viewer.scene.environment = undefined;
+  }
+}

package/src/Viewer/components/index.ts

@@ -25,6 +25,7 @@ import { IComponentsRegistry, componentsRegistry } from "@inweb/viewer-core";
 
 // import { AxesHelperComponent } from "./AxesHelperComponent";
 import { BackgroundComponent } from "./BackgroundComponent";
+import { RoomEnvironmentComponent } from "./RoomEnvironmentComponent";
 import { CameraComponent } from "./CameraComponent";
 import { ExtentsComponent } from "./ExtentsComponent";
 // import { ExtentsHelperComponent } from "./ExtentsHelperComponent";
@@ -80,6 +81,7 @@ export const components: IComponentsRegistry = componentsRegistry("threejs");
 components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponent(viewer));
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
 components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
+components.registerComponent("RoomEnvironmentComponent", (viewer) => new RoomEnvironmentComponent(viewer));
 // components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));