如何在Forge Viewer中覆盖ModelStructurePanel以首先显示可用模型列表(但不加载它们，直到我单击它们中的任何一个)

Forge Viewer 是 Autodesk 提供的一款用于查看和交互设计模型的 Web 应用程序。ModelStructurePanel 是 Forge Viewer 中的一个组件，用于显示模型的结构树，允许用户浏览和选择模型的不同部分。

要覆盖 ModelStructurePanel 以首先显示可用模型列表，但不加载它们，直到用户单击它们中的任何一个，你可以按照以下步骤进行：

基础概念

Forge Viewer: Autodesk 提供的用于查看和交互设计模型的 Web 应用程序。
ModelStructurePanel: Forge Viewer 中的一个组件，显示模型的结构树。
自定义面板: 通过覆盖或扩展 Forge Viewer 的现有组件来创建自定义的用户界面。

类型与应用场景

类型: 自定义面板覆盖。
应用场景: 大型模型库，需要在用户交互前减少初始加载时间。

实现步骤

以下是一个基本的实现示例，展示了如何覆盖 ModelStructurePanel 并实现所需功能：

// 初始化 Forge Viewer
let viewer;
function initializeViewer() {
    const options = {
        env: 'AutodeskProduction',
        getAccessToken: function(onTokenReady) {
            // 获取访问令牌的逻辑
            const token = 'YOUR_ACCESS_TOKEN';
            const timeInSeconds = 3600; // 令牌有效期
            onTokenReady(token, timeInSeconds);
        }
    };
    Autodesk.Viewing.Initializer(options, function() {
        viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
        viewer.start();
        // 加载模型
        const documentId = 'urn:YOUR_URN';
        Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
    });
}

function onDocumentLoadSuccess(doc) {
    const viewables = doc.getRoot().getDefaultGeometry();
    viewer.loadDocumentNode(doc, viewables).then(() => {
        // 覆盖 ModelStructurePanel
        const modelStructurePanel = viewer.getExtension('Autodesk.ModelStructure');
        if (modelStructurePanel) {
            modelStructurePanel.setVisible(false); // 隐藏默认的结构面板
        }
        // 创建自定义面板
        const customPanel = document.createElement('div');
        customPanel.id = 'customModelList';
        customPanel.innerHTML = '<ul id="modelList"></ul>';
        document.getElementById('forgeViewer').appendChild(customPanel);

        // 填充模型列表
        const modelList = doc.getRoot().search({ type: 'geometry', role: '3d' });
        const ul = document.getElementById('modelList');
        modelList.forEach(model => {
            const li = document.createElement('li');
            li.textContent = model.name;
            li.onclick = () => loadModel(model);
            ul.appendChild(li);
        });
    });
}

function onDocumentLoadFailure(viewerErrorCode) {
    console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
}

function loadModel(model) {
    // 加载模型的逻辑
    viewer.loadModel(model, { skipHiddenFragments: true });
}

initializeViewer();