@inweb/viewer-three/plugins/loaders/GLTFCloudLoader.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 { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { GLTFLoadingManager, Loader, loaders, ModelImpl, Viewer } from "@inweb/viewer-three";

class GLTFCloudLoader extends Loader {
  public viewer: Viewer;

  constructor(viewer: Viewer) {
    super();
    this.viewer = viewer;
  }

  override isSupport(file: any): boolean {
    return (
      typeof file === "object" &&
      typeof file.database === "string" &&
      typeof file.downloadResource === "function" &&
      /.gltf$/i.test(file.database)
    );
  }

  override async load(model: any): Promise<this> {
    const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
    const manager = new GLTFLoadingManager(url);

    const loader = new GLTFLoader(manager);
    loader.setRequestHeader(model.httpClient.headers);

    const progress = (event: ProgressEvent) => {
      const { lengthComputable, loaded, total } = event;
      const progress = lengthComputable ? loaded / total : 1;
      this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
    };

    const gltf = await loader.loadAsync(url, progress);
    if (!this.viewer.scene) return this;

    const modelImpl = new ModelImpl(gltf.scene);
    modelImpl.loader = this;
    modelImpl.viewer = this.viewer;

    this.viewer.scene.add(modelImpl.scene);
    this.viewer.models.push(modelImpl);

    this.viewer.syncOptions();
    this.viewer.syncOverlay();
    this.viewer.update();

    this.viewer.emitEvent({ type: "databasechunk", data: gltf.scene, file: model.file, model });

    return this;
  }
}

loaders.registerLoader("gltf-cloud", (viewer: any) => new GLTFCloudLoader(viewer));