查看器渲染不正确

Question

我的 Autodesk Viewer 有问题。它似乎渲染不正确。这是截图：

我按照本教程 (Tutorial) 将查看器集成到现有代码中。

查看器的 div 位于 Bootstrap 5 模式内，我认为这可能会导致问题。但即使从 html 中删除除查看器 div 之外的所有内容，问题仍然存在。尽管如此，这里还是该模态的 html（主体的直接子代）：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Live Konfigurator</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">This column was removed, because it's pretty large. It's the nav on the left...</div>
                        <div class="col">
                            <div id="preview"></div>
                            <div id="overlay"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Beenden</button>
                </div>
            </div>
        </div>
    </div>

我确实有很多来自不同模板的样式，但这里是相同的。如果我删除除查看器的样式（取自教程）之外的所有样式，它仍然会像这样呈现。这只是我为查看器和模式添加的样式：

.modal-backdrop {
    /* bug fix - no overlay */
    display: none;
}

#preview, #overlay {
    height: 50%;
    width: 50%;
}

我已经检查了 Javascript，但找不到那里的问题，但我最好的猜测是我不知何故搞砸了。所以这里是相关代码：

有viewer.js

async function getAccessToken(callback) {
    try {
        const resp = await fetch("/api/auth/token");
        if (!resp.ok) {
            throw new Error(await resp.text());
        }
        const { access_token, expires_in } = await resp.json();
        callback(access_token, expires_in);
    } catch (err) {
        alert('Could not obtain access token. See the console for more details.');
        console.error(err);
    }
}

export function initViewer(container) {
    return new Promise(function (resolve, reject) {
        Autodesk.Viewing.Initializer({ getAccessToken }, function () {
            //const config = {
            //    extensions: ['Autodesk.DocumentBrowser']
            //};
            var viewer = new Autodesk.Viewing.GuiViewer3D(container);
            var startedCode = viewer.start();
            if (startedCode > 0) {
                console.error('Failed to create a Viewer: WebGL not supported.');
                return;
            }

            console.log('Initialization complete, loading a model next...');

            viewer.setTheme('light-theme');
            resolve(viewer);
        });
    });
}

export function loadModel(viewer, urn) {
    return new Promise(function (resolve, reject) {
        function onDocumentLoadSuccess(doc) {
            resolve(viewer.loadDocumentNode(doc, doc.getRoot().getDefaultGeometry()));
        }
        function onDocumentLoadFailure(code, message, errors) {
            reject({ code, message, errors });
        }
        viewer.setLightPreset(0);
        Autodesk.Viewing.Document.load('urn:' + urn, onDocumentLoadSuccess, onDocumentLoadFailure);
    });
}

和 main.js：

import { initViewer, loadModel } from './viewer.js';

const myModal = document.getElementById('exampleModal')
myModal.addEventListener('shown.bs.modal', event => {
    initViewer(document.getElementById('preview')).then(viewer => {
        const urn = "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZXkwbnJlM3ZsZHl3dzdzdWt3bXZ3ZGplOWJramRwYWktZGVzaWduYXV0b21hdGlvbi1wZXJzaXN0ZW50L1NCNTAuemlw"; //btoa("urn:adsk.objects:os.object:ey0nre3vldyww7sukwmvwdje9bkjdpai-designautomation-persistent/SB50.zip");
        loadModel(viewer, urn);
    });
})

myModal.addEventListener('hidden.bs.modal', event => {
    // for destroying viewer instance
})

为了完整起见，以下是我加载 html 正文底部的脚本：

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
    <script src="js/main.js" type="module"></script>
    <script src="js/script.js"></script>

也许有人以前遇到过这个问题，或者知道我可能会错过什么。

提前致谢， 西蒙

Answer 1

它缺少对查看器样式表的引用，如下所示：

<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">