I am facing a challenge in implementing multiple instances of the Autodesk Forge Viewer (v6.2) on my webpage, each hidden within tabs.
The goal is to show and hide the viewer with a loaded model as the user switches between tabs.
Although I have managed to achieve this functionality, any hidden instances that have a loaded model encounter errors during certain events, such as resize event, displaying an error message like:
VM19014 viewer3D.min.js:53 Uncaught TypeError: Cannot read property '__webglFramebuffer' of null
at k.initFrameBufferMRT (VM19014 viewer3D.min.js:53)
I have explored options such as .tearDown() and finish(), but these methods seem to completely unload the model from the viewer, resulting in a sluggish experience for the user.
Is there a way to pause the viewer when it is not visible?
Edit:
I acknowledge the solution provided below as valid and one that I might consider if rebuilding the page.
Ultimately, I opted for a different workaround where I moved the entire tab content offscreen so that the canvas remains active in the DOM without affecting the layout:
.tab-content {
top: -9999px;
left: -9999px;
position: absolute;
display: block !important;
}