如何在Forge Viewer旁添加固定属性面板并避免遮挡

问题核心：Forge Viewer初始化时会自动调整内部容器尺寸，覆盖父元素的宽度设置，导致左侧Viewer占满100%屏幕，被右侧20%宽度的属性面板遮挡。

修复方案 #

1. 修正Flex布局规则：移除#forgeViewer的flex:1，改用flex-basis:80%固定宽度，同时保留flex-shrink:0防止被压缩
2. 强制Viewer内部容器继承父元素尺寸：添加CSS规则限制Viewer内部的.adsk-viewing-viewer容器宽度，避免溢出
3. Viewer加载后触发尺寸重计算：在模型加载完成后调用viewer.resize()，确保Viewer适配父容器尺寸

修改后的完整代码 #

<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
  <meta charset="utf-8">

  <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>

  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #container {
      display: flex;
      width: 100%;
      height: 100%;
    }
    #forgeViewer {
      flex-basis: 80%;
      height: 100%;
      background: #f0f0f0;
      flex-shrink: 0;
      position: relative;
    }
    /* 强制Viewer内部容器适配父元素宽度 */
    #forgeViewer .adsk-viewing-viewer {
      width: 100% !important;
      height: 100% !important;
    }
    #propertyPanel {
      flex-basis: 20%;
      height: 100%;
      overflow-y: auto;
      border-left: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box;
      background: #fff;
      position: relative;
      z-index: 10;
    }
  </style>
</head>
<body>

<div id="container">
  <div id="forgeViewer"></div>
  <div id="propertyPanel">
    <h2>Properties</h2>
    <div id="propertyContent"></div>
  </div>
</div>

<script>
  var viewer;
  var options = {
    env: 'AutodeskProduction2',
    api: 'streamingV2',  // 欧洲区域模型请改为'streamingV2_EU'
    getAccessToken: function(onTokenReady) {
      var token = '<My Access Token>';
      var timeInSeconds = 3600; // 使用APS认证接口返回的有效期
      onTokenReady(token, timeInSeconds);
    }
  };

  Autodesk.Viewing.Initializer(options, function() {

    var htmlDiv = document.getElementById('forgeViewer');
    viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
    var startedCode = viewer.start();
    if (startedCode > 0) {
      console.error('创建Viewer失败：不支持WebGL');
      return;
    }

    console.log('初始化完成，开始加载模型...');

    var documentId = 'urn:<My URN>';
    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);

    function onDocumentLoadSuccess(viewerDocument) {
      var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
      viewer.loadDocumentNode(viewerDocument, defaultModel).then(function() {
        // 模型加载完成后触发尺寸重计算
        viewer.resize();
      });
    }

    function onDocumentLoadFailure() {
      console.error('加载Forge资源清单失败');
    }

    viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function(event) {
      const dbIds = event.dbIdArray;
      if (dbIds.length > 0) {
        viewer.getProperties(dbIds[0], function(props) {
          displayProperties(props);
        });
      } else {
        clearProperties();
      }
    });

    function displayProperties(props) {
      const propertyContent = document.getElementById('propertyContent');
      propertyContent.innerHTML = '';
      for (const prop of props.properties) {
        const propDiv = document.createElement('div');
        propDiv.innerHTML = `<strong>${prop.displayName}</strong>: ${prop.displayValue}`;
        propertyContent.appendChild(propDiv);
      }
    }

    function clearProperties() {
      const propertyContent = document.getElementById('propertyContent');
      propertyContent.innerHTML = '<p>无可用属性</p>';
    }
  });
</script>
</body>
</html>

关键修改说明 #

• 用flex-basis替代width定义Flex容器元素的基础宽度，避免flex布局优先级冲突
• 添加.adsk-viewing-viewer的强制样式，防止Viewer内部容器自行扩展宽度
• 在模型加载完成的回调中调用viewer.resize()，确保Viewer正确识别父容器尺寸

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