如何在Autodesk Forge Viewer中启用支持楼层切换的小地图扩展？

核心实现思路 #

小地图功能本质是通过双Viewer实例联动实现：

• 一个Viewer加载2D平面图作为小地图视图
• 另一个Viewer加载3D模型作为主视图
• 监听小地图Viewer的相机变化事件，将相机参数同步到主3D Viewer，实现视图联动
• 额外处理楼层切换事件，同步两个Viewer的楼层可见性

关键代码片段 #

1. 双Viewer初始化与相机同步 #

// 初始化主3D Viewer
const mainViewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('main-viewer'));
mainViewer.start();
mainViewer.loadModel('your-3d-model-urn');

// 初始化小地图2D Viewer
const miniMapViewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('minimap-viewer'));
miniMapViewer.start();
miniMapViewer.loadModel('your-2d-floorplan-urn');

// 监听小地图相机变化，同步到主Viewer
miniMapViewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGED_EVENT, (event) => {
  const camera = event.target.getCamera();
  // 将2D相机的位置/视角转换为3D空间对应参数（需根据模型坐标系调整）
  const mainCamera = mainViewer.getCamera();
  mainCamera.position.set(camera.position.x, camera.position.y, mainCamera.position.z);
  mainCamera.target.set(camera.target.x, camera.target.y, mainCamera.target.z);
  mainViewer.impl.invalidate(true);
});

2. 楼层切换联动 #

// 获取楼层管理器（需确保模型加载完成后调用）
const mainFloorManager = mainViewer.model.getData().floorManager;
const miniFloorManager = miniMapViewer.model.getData().floorManager;

// 监听主Viewer楼层切换，同步到小地图
mainViewer.addEventListener(Autodesk.Viewing.FLOOR_CHANGED_EVENT, (event) => {
  const activeFloorId = event.floorId;
  miniFloorManager.setActiveFloor(activeFloorId);
  miniMapViewer.impl.invalidate(true);
});

// 监听小地图楼层切换，同步到主Viewer
miniMapViewer.addEventListener(Autodesk.Viewing.FLOOR_CHANGED_EVENT, (event) => {
  const activeFloorId = event.floorId;
  mainFloorManager.setActiveFloor(activeFloorId);
  mainViewer.impl.invalidate(true);
});

参考资源 #

• Autodesk官方示例中的Multiple Viewports场景：展示了多Viewer实例同步的基础逻辑，可作为小地图功能的原型参考
• 社区贡献的FloorplanNavigator扩展：实现了平面图导航与3D视图联动的完整功能，包含楼层切换逻辑
• Forge Viewer官方文档：重点查看Camera类、FloorManager类及事件监听相关章节

技术帮助途径 #

• 直接在Stack Overflow上使用autodesk-forge、autodesk-viewer标签提问，会有官方工程师和社区开发者解答
• 参与Autodesk Forge开发者论坛的讨论，获取针对性的实现建议

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