@inweb/viewer-three
Version:
JavaScript library for rendering CAD and BIM files in a browser using Three.js
81 lines (80 loc) • 2.81 kB
TypeScript
import { ILoadersRegistry } from "@inweb/viewer-core";
/**
* Viewer loaders registry. Use this registry to register custom loaders.
*
* To implement custom loader:
*
* 1. Define a loader class implements {@link ILoader}.
* 2. Define a constructor with a `viewer` parameter.
* 3. Override {@link ILoader.isSupport} and check if the loader can load the specified file.
* 4. Override {@link ILoader.load} and define the logic for loading the scene from the file.
*
* The loader should do:
*
* - Load raw data from file and convert it to the `Three.js` scene.
* - Add scene to the viewer `scene`.
* - Create `ModelImpl` instance with unique model ID add it to the viewer `models` list.
* - Synchronize viewer options and overlay.
* - Update the viewer.
*
* The loader must emit events:
*
* - `geometryprogress` - during loading (or once at 100% when complete).
* - `databasechunk` - when scene is loaded and ready to render.
* 5. Override {@link ILoader.dispose} and release loader resources, if required.
* 6. Use `this.abortController` (defined in `Loader` class) to abort loading raw data.
* 7. Register loader provider in the loaders registry by calling the {@link loaders.registerLoader}.
*
* @example Implementing a custom loader.
*
* ```javascript
* import { Scene } from "three";
* import { Loader, loaders, ModelImpl, Viewer } from "@inweb/viewer-three";
*
* class MyLoader extends Loader {
* public viewer: Viewer;
*
* constructor(viewer: Viewer) {
* super();
* this.viewer = viewer;
* }
*
* override isSupport(file, format): Boolean {
* // check if this loader supports the file source and format
* return type file === "string" && format === "myformat";
* }
*
* override load(file, format, params = {}): Promise<this> {
* // load raw data from file (custom loading logic)
* const data = await fetch(file).then((result) => result.arrayBuffer());
*
* // convert raw data to the Three.js scene (custom parsing logic)
* const scene = this.parse(data);
*
* const modelImpl = new ModelImpl(scene);
* modelImpl.id = params.modelId;
*
* this.viewer.scene.add(scene);
* this.viewer.models.push(modelImpl);
*
* this.viewer.syncOptions();
* this.viewer.syncOverlay();
*
* this.viewer.emitEvent({ type: "geometryprogress", data: 1, file });
* this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
*
* this.viewer.update(true);
*
* return Promise.resove(this);
* };
*
* private parse(data: ArrayBuffer): Scene {
* // custom parsing logic
* return new Scene();
* }
* }
*
* loaders.registerLoader("MyLoader", (viewer) => new MyLoader(viewer));
* ```
*/
export declare const loaders: ILoadersRegistry;