@inweb/viewer-visualize
    Preparing search index...

    Variable loadersConst

    loaders: ILoadersRegistry = ...

    Viewer loaders registry. Use this registry to register custom loaders.

    To implement custom loader:

    1. Define a loader class implements ILoader.

    2. Define a constructor with a viewer parameter.

    3. Override ILoader.isSupport and check if the loader can load the specified file.

    4. Override ILoader.load and define the logic for loading the model from the file.

      The loader should do:

      • Load model data from file into the buffer. The model data must be a VSFX format.
      • Parse data buffer with the VisualizeJS viewer instance.
      • Create ModelImpl instance with unique model ID add it to the viewer models list.
      • Synchronize viewer styles, options and overlay.
      • Update the viewer.

      The loader must emit events:

      • geometryprogress - during loading (or once at 100% when complete).
      • databasechunk - when model is loaded and ready to render.

    5. Override 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 loaders.registerLoader.

    import { Loader, loaders, Viewer } from "@inweb/viewer-visualize";

    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 VSFX data from file (custom loading logic)
        const data = await fetch(file).then((result) => result.arrayBuffer());

        const modelImpl = new ModelImpl();
        modelImpl.id = params.modelId;

        this.viewer.visViewer().parseVsfx(new Uint8Array(data));
        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, file });

        this.viewer.update(true);

        return Promise.resove(this);
      };
    }

    loaders.registerLoader("MyLoader", (viewer) => new MyLoader(viewer));

    Settings

    Member Visibility