如何在APS Viewer中加载多个GLB模型？报错问题求助

能否用viewer.loadDocumentNode加载多个GLB模型？ #

不行。Autodesk.Viewing.Document.load和viewer.loadDocumentNode是针对Forge模型转换服务生成的SVF/SVF2格式文档设计的，无法直接加载原始GLB文件，这就是你遇到Cannot read properties of undefined (reading 'traverse')错误的原因——Viewer尝试将GLB文件解析为Forge文档结构，导致逻辑异常。

正确实现方法：使用viewer.loadModel加载GLB #

APS Viewer支持直接加载GLB格式模型，通过viewer.loadModel方法即可，同时设置keepCurrentModels: true参数保留已加载模型，实现多模型叠加加载。

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple 3D Viewer - Autodesk Forge AggregatedView</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta charset="utf-8">

    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #viewer {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="viewer"></div>

    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>

    <script>
        function launchViewer( models ) {
          if( !models || models.length <= 0 )
            return console.error( 'Empty model input' );

          const options = {
            env: 'AutodeskProduction2',
            getAccessToken: null,
          };

          const viewerConfig = {
            disableBimWalkInfoIcon: true
          };

          Autodesk.Viewing.Initializer( options, function() {
            const viewerDiv = document.getElementById( 'viewer' );
            const viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv, viewerConfig);
            viewer.start();

            // 逐个加载GLB模型
            models.forEach((modelUrl, index) => {
              // 示例：为每个模型设置X轴偏移，避免重叠
              const placementTransform = new THREE.Matrix4();
              placementTransform.setPosition(new THREE.Vector3(index * 5, 0, 0));

              viewer.loadModel(
                modelUrl,
                {
                  keepCurrentModels: true,
                  placementTransform: placementTransform,
                  globalOffset: {x:0,y:0,z:0}
                },
                (model) => {
                  console.log(`Loaded model: ${modelUrl}`);
                },
                (error) => {
                  console.error(`Failed to load model: ${modelUrl}`, error);
                }
              );
            });
          });
        }

        const models = [
          'models/m1.glb',
          'models/m2.glb',
        ];

        launchViewer( models );
    </script>
  </body>
</html>

关键修改说明 #

• 移除Autodesk.Viewing.Document.load逻辑，改用viewer.loadModel直接加载GLB文件路径
• 保留keepCurrentModels: true参数，确保新模型加载时不清除已加载内容
• 添加模型位置偏移示例，避免多个GLB模型完全重叠
• 补充#viewer的宽高样式，让Viewer占满整个浏览器窗口

注意事项 #

• 确保GLB文件路径正确，静态服务器可正常访问这些资源
• 如需调整模型的缩放、旋转，可通过修改placementTransform矩阵实现
• 若GLB包含外部纹理，需确保纹理文件路径与GLB的相对关系正确

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