如何在Autodesk Forge Viewer固定位置显示模型缩放比例

核心方案：使用DOM元素嵌入Viewer容器 #

直接在Viewer的容器中添加2D DOM文本元素，这类元素属于页面层级，不会随3D模型的缩放、移动而变化，完全满足固定位置显示动态信息的需求。

实现步骤 #

1. 创建并挂载缩放显示元素
   生成一个适配Viewer风格的div，固定在窗口角落（示例为右下角），添加到Viewer的容器节点中：

// 创建缩放指示器DOM
const zoomIndicator = document.createElement('div');
// 设置固定位置与样式
zoomIndicator.style.position = 'absolute';
zoomIndicator.style.bottom = '12px';
zoomIndicator.style.right = '12px';
zoomIndicator.style.padding = '5px 10px';
zoomIndicator.style.background = 'rgba(30,30,30,0.8)';
zoomIndicator.style.color = '#ffffff';
zoomIndicator.style.fontSize = '14px';
zoomIndicator.style.fontFamily = 'Segoe UI, Arial, sans-serif';
zoomIndicator.style.borderRadius = '3px';
zoomIndicator.style.zIndex = 1000; // 确保层级高于Viewer画布
// 挂载到Viewer容器
viewer.container.appendChild(zoomIndicator);

2. 监听相机变化，实时更新缩放比例
   通过Viewer的CAMERA_CHANGED_EVENT事件监听相机状态变化，在回调中计算并更新缩放百分比：

// 监听相机变化事件
viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGED_EVENT, updateZoomValue);

function updateZoomValue() {
    // 获取当前缩放因子，初始状态为1（对应100%）
    const zoomFactor = viewer.navigation.getZoom();
    // 转换为百分比并取整
    const zoomPercent = Math.round(zoomFactor * 100);
    zoomIndicator.textContent = `${zoomPercent}%`;
}

// 初始化时立即更新一次
updateZoomValue();

3. 清理资源（可选）
   当Viewer卸载时，移除事件监听和DOM元素，避免内存泄漏：

viewer.addEventListener(Autodesk.Viewing.BEFORE_UNLOAD_EVENT, () => {
    viewer.removeEventListener(Autodesk.Viewing.CAMERA_CHANGED_EVENT, updateZoomValue);
    zoomIndicator.remove();
});

方案优势 #

• 完全脱离3D场景，不会随模型缩放、视角移动而改变位置或大小
• 样式可灵活调整，轻松匹配Viewer自带工具栏的视觉风格
• 实现简单，无需复杂的3D文本渲染逻辑

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