Autodesk Viewer初始化父元素隐藏后显示模糊的解决方法

问题根源 #

当Viewer初始化时，其容器的父元素处于display: none状态，此时Viewer无法正确获取容器的实际宽高以及设备像素比（DPR），导致渲染画布的分辨率被设置为极低值。后续调用resize()和invalidate()无法自动修正画布的分辨率，从而出现模糊。

解决方案 #

方案1：延迟Viewer初始化，直到父元素显示后再执行

调整初始化逻辑，只在父元素可见时才初始化Viewer，确保Viewer能正确获取容器尺寸和设备像素比：

// 修改初始化的useEffect逻辑
useEffect(() => {
  if (!viewerRef.current) return;
  const parentContainer = viewerRef.current.parentElement;
  if (!parentContainer) return;

  // 检查父元素当前是否可见
  const isParentVisible = getComputedStyle(parentContainer).display !== 'none';

  const initViewer = async () => {
    await autodeskViewerInitial();
    observer?.disconnect();
  };

  if (isParentVisible) {
    initViewer();
  } else {
    // 监听父元素样式变化，直到显示后初始化
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(() => {
        if (getComputedStyle(parentContainer).display !== 'none') {
          initViewer();
        }
      });
    });
    observer.observe(parentContainer, { attributes: true, attributeFilter: ['style'] });
  }

  return () => {
    if (viewerScriptRef.current) {
      viewerScriptRef.current.parentNode?.removeChild(viewerScriptRef.current);
    }
  };
}, [autodeskViewerInitial]);

方案2：父元素显示后手动修正画布分辨率

如果必须提前初始化Viewer，可在父元素显示后手动重置画布分辨率，强制Viewer按正确尺寸渲染：

// 添加修复模糊的函数
const fixViewerBlurriness = useCallback(() => {
  if (!viewer || !viewerRef.current) return;
  
  const dpr = window.devicePixelRatio || 1;
  const containerRect = viewerRef.current.getBoundingClientRect();
  
  // 重置画布分辨率为容器实际尺寸 × 设备像素比
  viewer.impl.canvas.width = containerRect.width * dpr;
  viewer.impl.canvas.height = containerRect.height * dpr;
  
  // 触发resize和全量重绘
  viewer.resize();
  viewer.impl.invalidate(true, true, true); // 三个参数分别表示：重绘场景、重绘UI、重绘覆盖层
}, [viewer, viewerRef]);

// 监听父元素显示状态变化，执行修复
useEffect(() => {
  if (!viewerRef.current) return;
  const parentContainer = viewerRef.current.parentElement;
  if (!parentContainer) return;

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      if (getComputedStyle(parentContainer).display !== 'none') {
        fixViewerBlurriness();
      }
    });
  });

  observer.observe(parentContainer, { attributes: true, attributeFilter: ['style'] });
  return () => observer.disconnect();
}, [fixViewerBlurriness]);

关键说明 #

• 设备像素比（DPR）是解决模糊的核心：高DPR屏幕下，画布需要设置为容器尺寸的DPR倍，才能保证渲染清晰；
• viewer.impl.invalidate(true, true, true)会强制Viewer全量重绘场景、UI和覆盖层，确保所有元素都按新分辨率渲染；
• 优先选择方案1，从根源避免问题；方案2作为兼容已有逻辑的补救措施。

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