ModelStructurePanel移至自定义侧边栏仅显示‘browser’，如何修复显示模型树形结构？

问题原因 #

将ModelStructurePanel移出Viewer容器后，它丢失了Viewer内置的CSS样式支持，导致树形结构组件被隐藏，仅显示占位文本。

修复方案 #

1. 绑定Viewer实例到面板 #

首先必须将面板与Viewer实例关联，否则无法获取模型数据渲染树形结构：

// 假设viewer是你的Autodesk.Viewing.GuiViewer3D实例
const modelStructurePanel = new Autodesk.Viewing.UI.ModelStructurePanel(
    document.getElementById('modelBrowserContent'),
    'modelStructurePanel',
    'Model Structure',
    {}
);
// 关键：绑定Viewer
modelStructurePanel.setViewer(viewer);
modelStructurePanel.setVisible(true);

2. 补充必要的CSS样式 #

手动添加Viewer面板的核心样式，让树形结构正常显示：

/* 自定义容器基础设置 */
#modelBrowserContent {
    height: 100%;
    overflow-y: auto;
    background: #fff;
}

/* 面板整体布局 */
.adsk-viewing-ui-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 面板标题栏 */
.adsk-viewing-ui-panel-header {
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

/* 树形内容容器 */
.adsk-viewing-ui-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* 树形节点样式 */
.adsk-viewing-ui-tree-node {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 14px;
}

.adsk-viewing-ui-tree-node:hover {
    background: #f0f0f0;
}

/* 节点展开/折叠图标 */
.adsk-viewing-ui-tree-node-toggle {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* 节点选中状态 */
.adsk-viewing-ui-tree-node.selected {
    background: #e3f2fd;
    color: #1976d2;
}

3. 模型加载后刷新面板 #

在模型几何加载完成后，触发面板更新以渲染树形结构：

viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, () => {
    modelStructurePanel.update();
});

注意事项 #

Autodesk官方不推荐将内置面板移出Viewer容器，后续版本更新可能引发样式或功能兼容问题。如果有长期维护需求，建议优先使用Viewer的自定义面板API或扩展机制实现类似功能。

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