Autodesk Forge Viewer 的多个实例

Question

我试图在我的页面上有多个 Autodesk Forge Viewer (v6.2) 运行实例，但隐藏在选项卡中。

当用户切换选项卡时，它会隐藏并向查看器显示加载的模型。

虽然我有这个工作，但任何已加载模型的隐藏实例都会在事件（例如调整大小事件）中中断，并给出如下错误：

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

我查看了 .tearDown() 和 finish()，但它们似乎完全卸载了查看器中的模型，降低了用户体验。

如果查看器不可见，是否有暂停查看器的方法？

编辑：

我已经接受了下面的答案，因为它是一个正确的解决方案，如果我重新制作页面，我可能会选择它。

最后，我采用了另一种解决方法，将整个选项卡内容移到屏幕外，这样 canvas 仍然存在于 DOM 中，并且不会跳转我的内容：

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

Answer 1

恐怕没有办法暂停查看器的初始化。它只能用非零大小 canvas 初始化。您可以尝试使用 z-index 而不是 display:none 隐藏查看器的多个实例，以便它们都得到一个非空的 canvas 并正确初始化。

Answer 2

此外 z-index 将 visibility 设置为 hidden 也很有效：

#MyViewerDiv {visibility: hidden;}

工作代码：https://jsfiddle.net/dukedhx/bp9dycrt/

Autodesk Forge Viewer 的多个实例

Multiple instances of Autodesk Forge Viewer

javascript

three.js

autodesk-viewer

autodesk-forge