@inweb/viewer-three 26.6.0 → 26.6.1

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

@@ -1,10 +1,12 @@
-import { AmbientLight, DirectionalLight } from "three";
+import { AmbientLight, DirectionalLight, HemisphereLight } from "three";
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 export declare class LightComponent implements IComponent {
     protected viewer: Viewer;
     protected ambientLight: AmbientLight;
     protected directionalLight: DirectionalLight;
+    protected frontLight: DirectionalLight;
+    protected hemisphereLight: HemisphereLight;
     constructor(viewer: Viewer);
     dispose(): void;
     geometryEnd: () => void;

package/package.json

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

package/plugins/components/LightHelperComponent.ts

@@ -21,12 +21,12 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { DirectionalLightHelper, Sphere } from "three";
+import { DirectionalLightHelper, HemisphereLightHelper, PointLightHelper, Sphere } from "three";
 import { IComponent, components, Viewer } from "@inweb/viewer-three";
 
 class LightHelperComponent implements IComponent {
   private viewer: Viewer;
-  private lightHelpers: DirectionalLightHelper[];
+  private lightHelpers: (DirectionalLightHelper | HemisphereLightHelper | PointLightHelper)[];
 
   constructor(viewer: Viewer) {
     this.lightHelpers = [];
@@ -54,11 +54,16 @@ class LightHelperComponent implements IComponent {
     this.lightHelpers.length = 0;
 
     const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
-    const size = extentsSize / 10;
+    const size = extentsSize / 20;
 
     this.viewer.scene.traverse((object: any) => {
-      if (object.isDirectionalLight) {
-        const helper = new DirectionalLightHelper(object, size, "#aa0000");
+      let helper: DirectionalLightHelper | HemisphereLightHelper | PointLightHelper;
+
+      if (object.isDirectionalLight) helper = new DirectionalLightHelper(object, size, "#aa0000");
+      else if (object.isHemisphereLight) helper = new HemisphereLightHelper(object, size, "#ff9800");
+      else if (object.isPointLight) helper = new PointLightHelper(object, size, "#ff9800");
+
+      if (helper) {
         this.lightHelpers.push(helper);
         this.viewer.helpers.add(helper);
       }

package/{src/Viewer → plugins}/components/RoomEnvironmentComponent.ts

@@ -23,11 +23,9 @@
 
 import { PMREMGenerator } from "three";
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
+import { IComponent, components, Viewer } from "@inweb/viewer-three";
 
-import { IComponent } from "@inweb/viewer-core";
-import type { Viewer } from "../Viewer";
-
-export class RoomEnvironmentComponent implements IComponent {
+class RoomEnvironmentComponent implements IComponent {
   protected viewer: Viewer;
 
   constructor(viewer: Viewer) {
@@ -45,3 +43,5 @@ export class RoomEnvironmentComponent implements IComponent {
     this.viewer.scene.environment = undefined;
   }
 }
+
+components.registerComponent("LightComponent", (viewer) => new RoomEnvironmentComponent(viewer));

package/plugins/loaders/IFCX/render.js

@@ -21,13 +21,15 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-// https://github.com/buildingSMART/IFC5-development/docs/viewer/render.mjs
-// Commit Date: 17.04.2025 11:13:04
-// Commit SHA-1: 0a351ab2efe7deabbdd131c338a08d5b5c38179c
+// Repository: https://github.com/buildingSMART/IFC5-development
+// Original File: docs/viewer/render.mjs
+// Commit SHA-1: 83a7ae862232c90065d1bd03fcd538315e7d2563
+// Commit Date: 20.05.2025 21:00:52
 
 // (C) buildingSMART International
 // published under MIT license
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable prefer-const */
 /* eslint-disable no-useless-catch */
 
@@ -175,7 +177,7 @@ function FindRootsOrCycles(nodes) {
       }
       visit(path);
     });
-  } catch {
+  } catch (e) {
     return null;
   }
   return roots;
@@ -262,7 +264,7 @@ function ToInputNodes(data) {
   let inputNodes = /* @__PURE__ */ new Map();
   data.forEach((ifcxNode) => {
     let node = {
-      path: ifcxNode.identifier,
+      path: ifcxNode.path,
       children: ifcxNode.children ? ifcxNode.children : {},
       inherits: ifcxNode.inherits ? ifcxNode.inherits : {},
       attributes: ifcxNode.attributes ? ifcxNode.attributes : {},
@@ -431,7 +433,7 @@ function Prune(file, deleteEmpty = false) {
     let collapsed = Collapse(nodes, deleteEmpty);
     if (collapsed)
       result.data.push({
-        identifier: collapsed.path,
+        path: collapsed.path,
         children: collapsed.children,
         inherits: collapsed.inherits,
         attributes: collapsed.attributes,
@@ -496,8 +498,8 @@ function init() {
   camera.lookAt(0, 0, 0);
   // const nd = document.querySelector(".viewport");
   // renderer = new THREE.WebGLRenderer({
-  //  alpha: true,
-  //  logarithmicDepthBuffer: true
+  //   alpha: true,
+  //   logarithmicDepthBuffer: true,
   // });
   // renderer.setSize(nd.offsetWidth, nd.offsetHeight);
   // controls = new THREE.OrbitControls(camera, renderer.domElement);
@@ -529,13 +531,12 @@ function createMaterialFromParent(parent, root) {
   };
   if (reference) {
     const materialNode = getChildByName(root, reference.ref);
-    let shader = FindChildWithAttr(materialNode, "usd::materials::inputs::diffuseColor");
-    if (shader) {
-      let color = shader?.attributes["usd::materials::inputs::diffuseColor"];
+    if (materialNode) {
+      let color = materialNode?.attributes["bsi::presentation::diffuseColor"];
       material.color = new THREE.Color(...color);
-      if (shader?.attributes["usd::materials::inputs::opacity"]) {
+      if (materialNode?.attributes["bsi::presentation::opacity"]) {
         material.transparent = true;
-        material.opacity = shader.attributes["usd::materials::inputs::opacity"];
+        material.opacity = materialNode.attributes["bsi::presentation::opacity"];
       }
     }
   }
@@ -596,17 +597,23 @@ function traverseTree(node, parent, root, parentNode = void 0) {
 // var icons = {
 //   "usd::usdgeom::mesh::points": "deployed_code",
 //   "usd::usdgeom::basiscurves::points": "line_curve",
-//   "usd::usdshade::material::outputs::surface.connect": "line_style"
+//   "usd::usdshade::material::outputs::surface.connect": "line_style",
 // };
 // function buildDomTree(prim, node) {
 //   const elem = document.createElement("div");
 //   let span;
 //   elem.appendChild(document.createTextNode(prim.name ? prim.name.split("/").reverse()[0] : "root"));
-//   elem.appendChild(span = document.createElement("span"));
-//   Object.entries(icons).forEach(([k, v]) => span.innerText += (prim.attributes || {})[k] ? v : " ");
+//   elem.appendChild((span = document.createElement("span")));
+//   Object.entries(icons).forEach(([k, v]) => (span.innerText += (prim.attributes || {})[k] ? v : " "));
 //   span.className = "material-symbols-outlined";
 //   elem.onclick = (evt) => {
-//     let rows = [["name", prim.name]].concat(Object.entries(prim.attributes)).map(([k, v]) => `<tr><td>${encodeHtmlEntities(k)}</td><td>${encodeHtmlEntities(typeof v === "object" ? JSON.stringify(v) : v)}</td>`).join("");
+//     let rows = [["name", prim.name]]
+//       .concat(Object.entries(prim.attributes))
+//       .map(
+//         ([k, v]) =>
+//           `<tr><td>${encodeHtmlEntities(k)}</td><td>${encodeHtmlEntities(typeof v === "object" ? JSON.stringify(v) : v)}</td>`
+//       )
+//       .join("");
 //     document.querySelector(".attributes .table").innerHTML = `<table border="0">${rows}</table>`;
 //     evt.stopPropagation();
 //   };
@@ -685,10 +692,8 @@ function composeAndRender() {
 //   controls.update();
 //   renderer.render(scene, camera);
 // }
-// export {
-//   composeAndRender,
-//   addModel as default
-// };
+// export { composeAndRender, addModel as default };
+
 export function parse(m, name) {
   datas.push([name, m]);
   composeAndRender();

package/src/Viewer/components/LightComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { AmbientLight, DirectionalLight, Sphere, Vector3 } from "three";
+import { AmbientLight, DirectionalLight, HemisphereLight, Sphere, Vector3 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -30,17 +30,27 @@ export class LightComponent implements IComponent {
   protected viewer: Viewer;
   protected ambientLight: AmbientLight;
   protected directionalLight: DirectionalLight;
+  protected frontLight: DirectionalLight;
+  protected hemisphereLight: HemisphereLight;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
 
-    this.ambientLight = new AmbientLight(0xffffff, 0);
+    this.ambientLight = new AmbientLight(0xffffff, 1);
     this.viewer.scene.add(this.ambientLight);
 
     this.directionalLight = new DirectionalLight(0xffffff, 1);
     this.directionalLight.position.set(0.5, 0, 0.866); // ~60º
     this.viewer.scene.add(this.directionalLight);
 
+    this.frontLight = new DirectionalLight(0xffffff, 1.25);
+    this.frontLight.position.set(0, 1, 0);
+    this.viewer.scene.add(this.frontLight);
+
+    this.hemisphereLight = new HemisphereLight(0xffffff, 0x444444, 1.25);
+    this.hemisphereLight.position.set(0, 0, 1);
+    this.viewer.scene.add(this.hemisphereLight);
+
     this.viewer.addEventListener("databasechunk", this.geometryEnd);
     this.viewer.addEventListener("clear", this.geometryEnd);
   }
@@ -52,6 +62,12 @@ export class LightComponent implements IComponent {
     this.directionalLight.removeFromParent();
     this.directionalLight.dispose();
 
+    this.frontLight.removeFromParent();
+    this.frontLight.dispose();
+
+    this.hemisphereLight.removeFromParent();
+    this.hemisphereLight.dispose();
+
     this.viewer.removeEventListener("databasechunk", this.geometryEnd);
     this.viewer.removeEventListener("clear", this.geometryEnd);
   }
@@ -59,15 +75,28 @@ export class LightComponent implements IComponent {
   geometryEnd = () => {
     this.ambientLight.removeFromParent();
     this.directionalLight.removeFromParent();
+    this.frontLight.removeFromParent();
+    this.hemisphereLight.removeFromParent();
 
     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).add(extentsCenter);
+    const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius;
+
+    this.directionalLight.position
+      .set(0.5, 0, 0.866)
+      .multiplyScalar(extentsSize * 2)
+      .add(extentsCenter);
     this.directionalLight.target.position.copy(extentsCenter);
 
+    this.frontLight.position.set(0, extentsSize * 2, 0).add(extentsCenter);
+    this.frontLight.target.position.copy(extentsCenter);
+
+    this.hemisphereLight.position.set(0, extentsSize * 3, 0).add(extentsCenter);
+
     this.viewer.scene.add(this.ambientLight);
     this.viewer.scene.add(this.directionalLight);
+    this.viewer.scene.add(this.frontLight);
+    this.viewer.scene.add(this.hemisphereLight);
   };
 }

package/src/Viewer/components/index.ts

@@ -24,7 +24,6 @@
 import { IComponentsRegistry, componentsRegistry } from "@inweb/viewer-core";
 
 import { BackgroundComponent } from "./BackgroundComponent";
-import { RoomEnvironmentComponent } from "./RoomEnvironmentComponent";
 import { CameraComponent } from "./CameraComponent";
 import { ExtentsComponent } from "./ExtentsComponent";
 import { LightComponent } from "./LightComponent";
@@ -78,7 +77,6 @@ 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));

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

@@ -1,7 +0,0 @@
-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;
-}