@inweb/viewer-three/src/Viewer/components/LightComponent.ts

JavaScript library for rendering CAD and BIM files in a browser using Three.js

///////////////////////////////////////////////////////////////////////////////
// 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 { AmbientLight, DirectionalLight, HemisphereLight, Quaternion, Sphere, Vector3 } from "three";

import { IComponent } from "@inweb/viewer-core";
import type { Viewer } from "../Viewer";

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, 1.5);
    this.directionalLight = new DirectionalLight(0xffffff, 1.0);
    this.frontLight = new DirectionalLight(0xffffff, 1.25);
    this.hemisphereLight = new HemisphereLight(0xffffff, 0x444444, 1.25);

    this.viewer.addEventListener("databasechunk", this.geometryEnd);
    this.viewer.addEventListener("clear", this.geometryEnd);
  }

  dispose(): void {
    this.ambientLight.removeFromParent();
    this.ambientLight.dispose();

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

  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;

    const upY = new Vector3(0, 1, 0);
    const frontY = new Vector3(0, 0, -1);

    const up = new Vector3().copy(this.viewer.camera.up);
    const quaternion = new Quaternion().setFromUnitVectors(upY, up);
    const front = new Vector3().copy(frontY).applyQuaternion(quaternion).negate();

    this.directionalLight.position
      .copy(up)
      .applyAxisAngle(front, (-Math.PI * 30) / 180)
      .multiplyScalar(extentsSize * 2)
      .add(extentsCenter);
    this.directionalLight.target.position.copy(extentsCenter);

    this.frontLight.position
      .copy(front)
      .multiplyScalar(extentsSize * 2)
      .add(extentsCenter);
    this.frontLight.target.position.copy(extentsCenter);

    this.hemisphereLight.position
      .copy(front)
      .multiplyScalar(extentsSize * 3)
      .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);
  };
}