Autodesk Forge Viewer的多个实例

Question

I'm trying to have multiple instances of the Autodesk Forge Viewer (v6.2) running on my page, but hidden in tabs.

As the user switches tabs it will hide and show the viewer with a loaded model.

While I have this working, any hidden instances that have loaded a model break on events (Eg resize event), giving an error like:

VM19014 viewer3D.min.js:53 Uncaught TypeError: Cannot read property '__webglFramebuffer' of null
    at k.initFrameBufferMRT (VM19014 viewer3D.min.js:53)

I have looked at .tearDown() and finish() but they seem to completely unload the model in the viewer, slowing the experience for the user.

Is there a way to pause the viewer if it's not visible?

Edit:

I've accepted the answer below as it is a correct solution and probably one I would go for if I was re-doing the page.

In the end, I went for a different workaround where I moved the entire tab content offscreen so the canvas is still live in the DOM and it doesn't jump my content around:

  .tab-content {
    top: -9999px;
    left: -9999px;
    position: absolute;
    display: block !important;
  }

Answer 1

I'm afraid there's no way to suspend the initialization of the viewer. It can only be initialized with non-zero-size canvas. You could try hiding the multiple instances of the viewer using z-index instead of display:none so that they all get a non-empty canvas and are initialized properly.

Answer 2

Besides z-index setting visibility to hidden also works well:

#MyViewerDiv {visibility: hidden;}

Working code: https://jsfiddle.net/dukedhx/bp9dycrt/