打开第二个查看器时 AutoDesk Forge 查看器 API 引发错误

Question

我的查看器在我的 Web 应用程序中的集成方式存在问题。在运行我的查看器的第一个实例中，我没有遇到任何问题。看，我的应用程序的每个页面上都有许多不同的查看器。但是，当我想打开第二个查看器时，我会得到标准控制台日志...

“三.WebGLRenderer 71 WebGLRenderer.js:29:12 WEBGL_debug_renderer_info 在 Firefox 中已弃用并将被删除。请使用渲染器。 WebGLRenderer.js:232:30 WebGL 渲染器：角度（Intel(R) HD Graphics 400 Direct3D11 vs_5_0 ps_5_0，D3D11-27.20.100.8854）WebGLRenderer.js:237:20 WebGL 供应商：Google Inc. (Intel)"

... 后面跟着错误：

Rendering to a canvas that was resized to zero. If you see this message you may be accidentally leaking a viewer instance. ErrorCode:14. Logger.js:188:18
_reportError Logger.js:188
beginScene RenderContext.js:607
initialize Viewer3DImpl.js:368
initialize Viewer3D.js:608
initialize GuiViewer3D.js:59
start Viewer3D.js:374
showViewer showViewer.js:72
(Async: promise callback)
K envinit.js:718
showViewer showViewer.js:68
updateStatus showViewer.js:11
getStatus showViewer.js:48
i x12:2
fireWith x12:2
A x12:4
c x12:4
(Async: EventHandlerNonNull)
send x12:4
ajax x12:4
ajax xtrue:4
getStatus showViewer.js:37
showViewer showViewer.js:97
anonymous Autodesk-Forge-Viewer--testing--update--Forge-Viewer-.js:89
v x12:6
B x12:6
v x12:6
run_without_catching_not_ready x12:6
v x12:6
value x12:6
r x12:6
value x12:6
n x12:6
n x12:6
traceSpan x12:6
n x12:6
(Async: setTimeout handler)
exports x12:13
R x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
initialize x12:6
value x12:6
autorun_top x12:6
value x12:6
run x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
run_once x12:6
run x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
exports x12:6
value x12:6
value x12:6

有人知道为什么会这样吗？起初我以为“......不小心泄露了查看器......”错误意味着 html 元素没有关闭，但事实并非如此。我很茫然，我不确定问题是什么。这是我的查看器代码：

    function showViewer(){
    let viewer;
    let options = {
        env: 'AutodeskProduction',
        api: 'derivativeV2',
        getAccessToken: function(onTokenReady) {
            var token = viewerAccessToken;
            var timeInSeconds = 3600;
            onTokenReady(token, timeInSeconds);
        }
    };
    Autodesk.Viewing.Initializer(options, () => {
        let htmlDiv = document.getElementById('forgeViewer');
        viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
        instance.data.viewer = viewer;
        let startedCode = viewer.start();
        viewer.setTheme("light-theme");
        viewer.loadExtension("Autodesk.CustomDocumentBrowser").then(() => {
            viewer.loadExtension("Autodesk.Viewing.MarkupsCore");
            viewer.loadExtension("Autodesk.Viewing.MarkupsGui");
        });
        if (startedCode > 0) {
            console.error('Failed to create a Viewer: WebGL not supported.');
            $("#loadingStatus").html("Failed to create a Viewer: WebGL not supported.");
            return;
        }
        console.log('Initialization complete, loading a model next...');
    });
    let documentId = `urn:` + viewerUrn;
    let derivativeId = `urn:` + instance.derivativeUrn;
    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
    function onDocumentLoadSuccess(viewerDocument) {
        let defaultModel = viewerDocument.getRoot().getDefaultGeometry();
        viewer.loadDocumentNode(viewerDocument, defaultModel);
    }
    function onDocumentLoadFailure() {
        console.error('Failed fetching Forge manifest');
        $("#loadingStatus").html("Failed fetching Forge manifest.");
    }
}

Answer 1

这个问题通常是由 CSS 布局引起的。当您尝试在宽度和高度为零或将display 设置为none 的<div> 中实例化查看器时，查看器将无法初始化其WebGL 渲染管道。

这是一个简单的 Forge 应用程序，它在一个页面上初始化两个查看器：https://github.com/petrbroz/forge-simple-viewer-nodejs/tree/sample/multiple-viewers（请注意，代码位于名为 sample/multiple-viewers 的分支中）。