Autodesk Forge Viewer 的多个实例答案

【问题标题】：Multiple instances of Autodesk Forge ViewerAutodesk Forge Viewer 的多个实例
【发布时间】：2019-04-02 05:00:50
【问题描述】：

我正在尝试在我的页面上运行多个 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()，但它们似乎完全卸载了查看器中的模型，从而减慢了用户的体验。

如果查看器不可见，是否可以暂停查看器？

编辑：

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

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

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

【问题讨论】：

标签： javascript three.js autodesk-forge autodesk-viewer

【解决方案1】：

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

【讨论】：

谢谢，我害怕那个。最后，我将标签内容移出屏幕，我认为这不是最好的解决方案，但在我的情况下是最快的。请参阅上面的编辑。

【解决方案2】：

除了z-index 将visibility 设置为hidden 也很有效：

#MyViewerDiv {visibility: hidden;}

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

【讨论】：

谢谢。我使用visibility: hidden 的问题是我需要首先在整个选项卡内容上设置display: block，这与页面的整个布局相混淆。对我来说更快的解决方案是将整个内容移出屏幕 - 请参阅上面的编辑。
但是您的标签内容不是已经绝对定位并脱离了流程吗？无论其显示值如何，都不应与其他元素混淆。见jsfiddle.net/dukedhx/epk9o40g