@inweb/viewer-three/src/Viewer/components/CameraComponent.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 { MathUtils, OrthographicCamera, PerspectiveCamera, Sphere, Vector2, Vector3 } from "three";

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

export class CameraComponent implements IComponent {
  protected viewer: Viewer;

  constructor(viewer: Viewer) {
    this.viewer = viewer;
    this.viewer.addEventListener("databasechunk", this.geometryEnd);
    this.viewer.addEventListener("optionschange", this.optionsChange);
    this.viewer.addEventListener("initialize", this.optionsChange);
  }

  dispose() {
    this.viewer.removeEventListener("databasechunk", this.geometryEnd);
    this.viewer.removeEventListener("optionschange", this.optionsChange);
    this.viewer.removeEventListener("initialize", this.optionsChange);
  }

  getCameraMode(camera: any): CameraMode {
    return camera.isOrthographicCamera ? "orthographic" : "perspective";
  }

  switchCamera(camera: any) {
    const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2 || 1;
    const rendererSize = this.viewer.renderer.getSize(new Vector2());
    const aspectRatio = rendererSize.x / rendererSize.y;

    if (camera.isPerspectiveCamera) {
      camera.aspect = aspectRatio;
      camera.near = extentsSize / 1000;
      camera.far = extentsSize * 1000;
    }
    if (camera.isOrthographicCamera) {
      camera.left = camera.bottom * aspectRatio;
      camera.right = camera.top * aspectRatio;
      camera.near = 0;
      camera.far = extentsSize * 1000;
    }

    camera.updateProjectionMatrix();

    this.viewer.camera = camera;
    this.viewer.renderPass.camera = camera;
    this.viewer.helpersPass.camera = camera;
    this.viewer.ssaaRenderPass.camera = camera;

    this.viewer.update();
  }

  switchCameraMode(mode: CameraMode) {
    if (!mode) return;

    const currentCamera: any = this.viewer.camera;
    if (mode === this.getCameraMode(currentCamera)) return;

    const target = this.viewer.target.clone();

    let camera: PerspectiveCamera | OrthographicCamera;

    if (currentCamera.isOrthographicCamera) {
      const fov = currentCamera.userData.fov || 45;
      const fieldHeight = (currentCamera.top - currentCamera.bottom) / currentCamera.zoom;
      const distance = fieldHeight / (2 * Math.tan(MathUtils.degToRad(fov) / 2));
      const direction = new Vector3().subVectors(currentCamera.position, target).normalize();

      camera = new PerspectiveCamera(fov);
      camera.position.copy(direction).multiplyScalar(distance).add(target);
    }
    if (currentCamera.isPerspectiveCamera) {
      const fov = currentCamera.fov;
      const distance = currentCamera.position.distanceTo(target);
      const fieldHeight = 2 * Math.tan(MathUtils.degToRad(fov) / 2) * distance;

      camera = new OrthographicCamera();
      camera.top = fieldHeight / 2;
      camera.bottom = -fieldHeight / 2;
      camera.position.copy(currentCamera.position);

      camera.userData.fov = fov;
    }
    if (!camera) return;

    camera.up.copy(currentCamera.up);
    camera.quaternion.copy(currentCamera.quaternion);

    this.switchCamera(camera);

    this.viewer.emitEvent({ type: "changecameramode", mode });
  }

  optionsChange = () => {
    this.switchCameraMode(this.viewer.options.cameraMode);
  };

  geometryEnd = () => {
    // do not change the camera after opening the second file in assembly
    if (this.viewer.models.length > 1) {
      this.switchCamera(this.viewer.camera);
      return;
    }

    let camera: any;

    this.viewer.scene.traverse((object: any) => {
      if (object.isCamera)
        if (!camera) camera = object;
        else if (object.isPerspectiveCamera && camera.isOrthographicCamera) camera = object;
    });

    if (camera) {
      camera.isDefaultCamera = true;
      camera.scale.set(1, 1, 1); // <- Visualize fix

      this.switchCamera(camera);

      const mode = this.getCameraMode(camera);

      this.viewer.options.cameraMode = mode;
      this.viewer.emitEvent({ type: "changecameramode", mode });
    } else {
      this.switchCamera(this.viewer.camera);
      this.viewer.executeCommand("setDefaultViewPosition");
    }
  };
}