Autodesk Viewer渲染异常问题求助

我在使用Autodesk Viewer时遇到渲染异常，问题截图如下：

我按照官方教程将Viewer集成到现有代码中，Viewer的div容器放置在Bootstrap 5模态框内。我曾怀疑是模态框导致问题，但即使移除HTML中除Viewer容器外的所有内容，问题依然存在。

以下是模态框的HTML代码（直接作为body子元素）：

<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>

我原本使用了其他模板的大量样式，但即使移除除Viewer相关样式外的所有样式，问题仍未解决。以下是我为Viewer和模态框添加的样式：

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

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

我检查了JavaScript代码但未发现明显问题，但仍怀疑是JS部分出错。以下是相关代码：

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/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/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>

希望有遇到过类似问题的人能提供解决思路，感谢帮助！

内容的提问来源于stack exchange，提问作者user21470747