javascript html autodesk-forge autodesk revit-api

Autodesk.DocumentBrowser in Forge/APS viewer with local svf-file

I am trying to run a local Forge/APS viewer where I am able to view a .rvt model translated to .svf.

Viewing the 3D model with the local .svf file works great, ootb with the Autodesk example provided below. My only problem is getting the Autodesk.DocumentBrowser extension to work.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Very Basic 3D Viewer</title>
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
    <!-- The Viewer JS & CSS-->
    <link
      rel="stylesheet"
      href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v7.*"
      type="text/css"
    />
    <script
      language="JavaScript"
      src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v7.*"
    ></script>
  </head>

  <body>
    <img
      src="/images/forge-logo.png"
      style="
        height: auto;
        width: 20%;
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 233;
      "
    />
    <div id="MyViewerDiv"></div>

    <!-- Developer JS -->
    <script>
      var myViewerDiv = document.getElementById("MyViewerDiv");
      var viewer = new Autodesk.Viewing.Private.GuiViewer3D(myViewerDiv);
      var options = {
        env: "Local",
        document: "./shaver/0.svf",
      };
      Autodesk.Viewing.Initializer(options, function () {
        viewer.start(options.document, options);
        viewer
          .loadExtension("Autodesk.DocumentBrowser", {})
          .then(function (extension) {
            console.log("Document Browser extension loaded:", extension);
          })
          .catch(function (error) {
            console.error("Failed to load Document Browser extension:", error);
          });
      });
    </script>
  </body>
</html>

I tried several ways. This way the console states, that the DocumentBrowser got loaded, but I am not seeing its button in the bar and the div isn't populated with anything.

I also tried svfs where the online viewer shows 2D views.

Another approach was to load the extension this way:

viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById("MyViewerDiv"), { extensions: ['Autodesk.DocumentBrowser', 'Autodesk.VisualClusters'] });

viewer.start();

Still with no sucess. The VisualCluster extension gets shown in the bar, but not the DocumentBrowser.

I am getting the feeling that the DocumentBrowser is not working with local .svf-files. But that confuses me, since I have seen examples online, which look like they're doing exactly this.

I would be glad if anyone could help. :) Either with clarifying what is possible and what isn't and/or with providing a working example for loading and viewing the DocumentBrowser with a local .svf-file.

Solution

Autodesk.DocumentBrowser extension is for showing the available views inside a document.

An *.svf file is just a single view, not a document.

A bubble.json file serves as a document or container of available views. If you load that then the Document Browser will work fine.

var viewer;
var options = {
    env: "Local",
};

var viewerDiv = document.getElementById("MyViewerDiv");
viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv, {
    extensions: ["Autodesk.DocumentBrowser"],
});
viewer.start();

Autodesk.Viewing.Initializer(options, function onInitialized() {
    Autodesk.Viewing.Document.load(
        "/svf_orbit_2023_invisible/bubble.json",
        onDocumentLoadSuccess
    );
});

function onDocumentLoadSuccess(doc) {
    var viewables = doc.getRoot().search(
        {
            type: "geometry",
            role: "3d",
        },
        true
    );
    if (viewables.length === 0) {
        console.error("Document contains no viewables.");
        return;
    }

    viewer.loadDocumentNode(doc, viewables[0]);
}