@inweb/viewer-three 26.6.0 → 26.6.2

package/lib/Viewer/Viewer.d.ts

@@ -151,6 +151,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     activeDragger(): IDragger | null;
     setActiveDragger(name?: string): IDragger | null;
     resetActiveDragger(): void;
+    getComponent(name: string): IComponent;
     is3D(): boolean;
     screenToWorld(position: {
         x: number;
@@ -174,7 +175,6 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
         z: number;
     };
     executeCommand(id: string, ...args: any[]): any;
-    getComponent(name: string): IComponent;
     drawViewpoint(viewpoint: IViewpoint): void;
     createViewpoint(): IViewpoint;
 }

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

@@ -0,0 +1,18 @@
+import { LineBasicMaterial, MeshBasicMaterial } from "three";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+import { IComponent, ResizeEvent } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+export declare class HighlighterComponent implements IComponent {
+    protected viewer: Viewer;
+    highlightMaterial: MeshBasicMaterial;
+    outlineMaterial: LineMaterial;
+    highlightLineMaterial: LineBasicMaterial;
+    highlightLineGlowMaterial: LineMaterial;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    highlight(object: any): void;
+    unhighlight(object: any): void;
+    geometryEnd: () => void;
+    optionsChange: () => void;
+    viewerResize(event: ResizeEvent): void;
+}

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

@@ -0,0 +1,6 @@
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
+export declare class HighlighterUtils {
+    static isBreak(positions: Float32Array, i: number): boolean;
+    static fromIndexedLine(positions: Float32Array, indices: number[]): LineSegmentsGeometry;
+    static fromNonIndexedLine(positions: Float32Array, isLineSegments: boolean): LineSegmentsGeometry;
+}

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/lib/Viewer/components/SelectionComponent.d.ts

@@ -1,11 +1,12 @@
-import { Intersection, MeshBasicMaterial, Object3D, Raycaster, Vector2 } from "three";
+import { Intersection, Object3D, Raycaster, Vector2 } from "three";
 import { IComponent } from "@inweb/viewer-core";
-import type { Viewer } from "../Viewer";
+import { Viewer } from "../Viewer";
+import { HighlighterComponent } from "./HighlighterComponent";
 export declare class SelectionComponent implements IComponent {
     protected viewer: Viewer;
     protected raycaster: Raycaster;
     protected downPosition: Vector2;
-    protected facesMaterial: MeshBasicMaterial;
+    protected highlighter: HighlighterComponent;
     constructor(viewer: Viewer);
     dispose(): void;
     onPointerDown: (event: PointerEvent) => void;
@@ -15,5 +16,5 @@ export declare class SelectionComponent implements IComponent {
     getPointerIntersects(mouse: Vector2): Array<Intersection<Object3D>>;
     select(object: any): void;
     clearSelection(): void;
-    optionsChange: () => void;
+    initHighlighter: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.6.0",
+  "version": "26.6.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",
@@ -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.2",
+    "@inweb/eventemitter2": "~26.6.2",
+    "@inweb/markup": "~26.6.2",
+    "@inweb/viewer-core": "~26.6.2"
   },
   "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/Viewer.ts

@@ -535,6 +535,10 @@ export class Viewer
     }
   }
 
+  getComponent(name: string): IComponent {
+    return this._components.find((component) => component.name === name);
+  }
+
   is3D(): boolean {
     return true;
   }
@@ -573,10 +577,6 @@ export class Viewer
     return commands.executeCommand(id, this, ...args);
   }
 
-  getComponent(name: string): IComponent {
-    return this._components.find((component) => component.name === name);
-  }
-
   drawViewpoint(viewpoint: IViewpoint): void {
     if (!this.renderer) return;
 

package/src/Viewer/components/HighlighterComponent.ts

@@ -0,0 +1,159 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Color, EdgesGeometry, LineBasicMaterial, MeshBasicMaterial, Vector2 } from "three";
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
+import { Wireframe } from "three/examples/jsm/lines/Wireframe.js";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+
+import { IComponent, ResizeEvent } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+import { HighlighterUtils } from "./HighlighterUtils";
+
+export class HighlighterComponent implements IComponent {
+  protected viewer: Viewer;
+  public highlightMaterial: MeshBasicMaterial;
+  public outlineMaterial: LineMaterial;
+  public highlightLineMaterial: LineBasicMaterial;
+  public highlightLineGlowMaterial: LineMaterial;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+
+    this.viewer.addEventListener("databasechunk", this.geometryEnd);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("resize", this.viewerResize);
+
+    this.geometryEnd();
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("resize", this.viewerResize);
+  }
+
+  highlight(object: any) {
+    if (object.isHighlighted) return;
+
+    if (object.isLine || object.isLineSegments) {
+      const positions = object.geometry.attributes.position.array;
+      const indices = object.geometry.index ? object.geometry.index.array : null;
+      const lineGeometry = indices
+        ? HighlighterUtils.fromIndexedLine(positions, indices)
+        : HighlighterUtils.fromNonIndexedLine(positions, object.isLineSegments);
+
+      const wireframe = new Wireframe(lineGeometry, this.highlightLineGlowMaterial);
+      wireframe.position.copy(object.position);
+      wireframe.rotation.copy(object.rotation);
+      wireframe.scale.copy(object.scale);
+
+      object.parent.add(wireframe);
+
+      object.userData.highlightwireframe = wireframe;
+      object.userData.originalMaterial = object.material;
+      object.material = this.highlightLineMaterial;
+      object.isHighlighted = true;
+    } else if (object.isMesh) {
+      const edgesGeometry = new EdgesGeometry(object.geometry, 30);
+      const lineGeometry = new LineSegmentsGeometry().fromEdgesGeometry(edgesGeometry);
+
+      const wireframe = new Wireframe(lineGeometry, this.outlineMaterial);
+      wireframe.position.copy(object.position);
+      wireframe.rotation.copy(object.rotation);
+      wireframe.scale.copy(object.scale);
+
+      object.parent.add(wireframe);
+
+      object.userData.highlightwireframe = wireframe;
+      object.userData.originalMaterial = object.material;
+      object.material = this.highlightMaterial;
+      object.isHighlighted = true;
+    }
+  }
+
+  unhighlight(object: any) {
+    if (!object.isHighlighted) return;
+
+    object.isHighlighted = false;
+    object.material = object.userData.originalMaterial;
+    object.userData.highlightwireframe.removeFromParent();
+
+    delete object.userData.originalMaterial;
+    delete object.userData.highlightwireframe;
+  }
+
+  geometryEnd = () => {
+    const { facesColor, facesTransparancy, edgesColor } = this.viewer.options;
+
+    this.highlightMaterial = new MeshBasicMaterial({
+      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+      transparent: true,
+      opacity: (255 - facesTransparancy) / 255,
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    this.outlineMaterial = new LineMaterial({
+      color: new Color(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255),
+      linewidth: 1.5,
+      depthTest: false,
+      depthWrite: false,
+      resolution: new Vector2(window.innerWidth, window.innerHeight),
+    });
+
+    this.highlightLineMaterial = new LineBasicMaterial({
+      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    this.highlightLineGlowMaterial = new LineMaterial({
+      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+      linewidth: 5,
+      transparent: true,
+      opacity: 0.8,
+      depthTest: true,
+      depthWrite: true,
+      resolution: new Vector2(window.innerWidth, window.innerHeight),
+    });
+  };
+
+  optionsChange = () => {
+    const { facesColor, facesTransparancy, edgesColor } = this.viewer.options;
+
+    this.highlightMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.highlightMaterial.opacity = (255 - facesTransparancy) / 255;
+    this.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+    this.highlightLineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.highlightLineGlowMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+
+    this.viewer.update();
+  };
+
+  viewerResize(event: ResizeEvent) {
+    if (!this.outlineMaterial) return;
+
+    this.outlineMaterial.resolution.set(event.width, event.height);
+  }
+}

package/src/Viewer/components/HighlighterUtils.ts

@@ -0,0 +1,116 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
+
+export class HighlighterUtils {
+  static isBreak(positions: Float32Array, i: number) {
+    return (
+      isNaN(positions[i]) ||
+      isNaN(positions[i + 1]) ||
+      isNaN(positions[i + 2]) ||
+      positions[i] === Infinity ||
+      positions[i] === -Infinity ||
+      positions[i + 1] === Infinity ||
+      positions[i + 1] === -Infinity ||
+      positions[i + 2] === Infinity ||
+      positions[i + 2] === -Infinity
+    );
+  }
+
+  static fromIndexedLine(positions: Float32Array, indices: number[]) {
+    const lineGeometry = new LineSegmentsGeometry();
+    const segments = [];
+
+    for (let i = 0; i < indices.length; i += 2) {
+      const idx1 = indices[i] * 3;
+      const idx2 = indices[i + 1] * 3;
+
+      if (indices[i] === -1 || indices[i + 1] === -1) {
+        continue;
+      }
+
+      segments.push(
+        positions[idx1],
+        positions[idx1 + 1],
+        positions[idx1 + 2],
+        positions[idx2],
+        positions[idx2 + 1],
+        positions[idx2 + 2]
+      );
+    }
+
+    if (segments.length === 0) return null;
+
+    lineGeometry.setPositions(segments);
+    return lineGeometry;
+  }
+
+  static fromNonIndexedLine(positions: Float32Array, isLineSegments: boolean) {
+    const lineGeometry = new LineSegmentsGeometry();
+    const segments = [];
+
+    if (isLineSegments) {
+      for (let i = 0; i < positions.length; i += 6) {
+        if (i + 5 >= positions.length) break;
+
+        if (HighlighterUtils.isBreak(positions, i) || HighlighterUtils.isBreak(positions, i + 3)) continue;
+
+        segments.push(
+          positions[i],
+          positions[i + 1],
+          positions[i + 2],
+          positions[i + 3],
+          positions[i + 4],
+          positions[i + 5]
+        );
+      }
+    } else {
+      let lastValidIndex = -1;
+
+      for (let i = 0; i < positions.length; i += 3) {
+        if (HighlighterUtils.isBreak(positions, i)) {
+          lastValidIndex = -1;
+          continue;
+        }
+
+        if (lastValidIndex !== -1) {
+          segments.push(
+            positions[lastValidIndex],
+            positions[lastValidIndex + 1],
+            positions[lastValidIndex + 2],
+            positions[i],
+            positions[i + 1],
+            positions[i + 2]
+          );
+        }
+        lastValidIndex = i;
+      }
+    }
+
+    if (segments.length === 0) return null;
+
+    lineGeometry.setPositions(segments);
+    return lineGeometry;
+  }
+}

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);
   };
 }