Viewer rendering incorrectly

Question

I have a problem with the Autodesk Viewer. It seems to be rendering incorrectly. Here is a screenshot:

Viewer rendering issue

I followed this tutorial (Tutorial) to integrate the viewer into existing code.

The div of the viewer is inside a Bootstrap 5 modal, which I thought might cause issues. But even when removing everything from the html apart from the viewer div, the problem remains. Still, here is the html of that modal (direkt child of the 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>

I do have a lot of styling from a different template, but the same here. If I remove all styling except for that of the viewer (taken from the tutorial) it still renders like this. Here is just the styling I added for the viewer and the modal:

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

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

I've gone through the Javascript and couldn't find a problem there, but my best guess is that I messed up there somehow. So here is the relevant code for that:

There is the 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);
    });
}

and the 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
})

And for completeness sake, here are the scripts I load a the bottom of the html body:

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

Maybe someone has faced this issue before or has an idea what I might be missing.

Thanks in advance

Answer 1

It's missing a reference to Viewer's style sheet, as below:

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