如何在Forge中创建支持bucket批量加载的多模型查看器

前置准备 #

你需要先在Node.js后端完成两个基础逻辑：

• 调用Forge Data Management API拉取指定Bucket下所有已完成转换的模型URN，过滤掉未完成SVF转换的文件，避免加载失败
• 为每个URN生成对应的临时访问令牌，令牌需要包含viewables:read权限

前端加载核心逻辑 #

核心是利用Viewer的多模型加载能力，按顺序异步加载所有模型，步骤如下：

1. 初始化Viewer基础实例，和单模型加载的初始化逻辑一致，示例代码：

let viewer;
function initViewer(container) {
  const options = {
    env: 'AutodeskProduction',
    accessToken: 'YOUR_GENERATED_ACCESS_TOKEN'
  };
  Autodesk.Viewing.Initializer(options, () => {
    viewer = new Autodesk.Viewing.GuiViewer3D(container);
    viewer.start();
    // 初始化完成后调用加载多模型的方法
    loadAllModelsFromBucket()
  });
}

2. 实现批量加载模型的方法，建议按顺序加载避免并发冲突：

// 提前从后端接口拿到当前Bucket下所有合法的模型URN数组
const modelUrnList = ['urn:xxx1', 'urn:xxx2', 'urn:xxx3'];
// 存储所有加载完成的模型实例
const loadedModels = [];

async function loadAllModelsFromBucket() {
  for (const urn of modelUrnList) {
    try {
      const model = await loadSingleModel(urn);
      loadedModels.push(model);
      console.log(`模型${urn}加载完成`);
    } catch (err) {
      console.error(`模型${urn}加载失败:`, err);
    }
  }
  // 所有模型加载完成后可调整视角，适配所有模型的包围盒
  adjustViewerToFitAllModels();
}

// 单模型加载封装
function loadSingleModel(urn) {
  return new Promise((resolve, reject) => {
    const documentId = `urn:${btoa(urn)}`;
    Autodesk.Viewing.Document.load(documentId, (doc) => {
      const viewables = doc.getRoot().getDefaultGeometry();
      // 第一个模型直接加载，后续模型用loadModel方法追加
      const loadOptions = loadedModels.length === 0 ? {} : {
        placementTransform: new THREE.Matrix4(), // 可按需调整不同模型的位置偏移，避免重叠
        keepCurrentModels: true,
        globalOffset: {x:0, y:0, z:0} // 模型坐标统一时可设置相同偏移
      };
      viewer.loadDocumentNode(doc, viewables, loadOptions)
        .then(model => resolve(model))
        .catch(err => reject(err));
    }, (err) => reject(err));
  });
}

3. 多模型全局视角适配实现：

function adjustViewerToFitAllModels() {
  const fullBbox = new THREE.Box3();
  loadedModels.forEach(model => {
    const modelBbox = model.getBoundingBox();
    fullBbox.union(modelBbox);
  });
  viewer.fitToView(fullBbox);
}

常见优化点 #

• 如果模型加载后出现重叠，可修改loadOptions里的placementTransform参数，给后续加载的模型设置X/Y/Z轴的偏移量，错开不同模型的展示位置
• 批量加载时可添加加载进度提示，给用户明确的加载状态反馈
• 建议后端接口返回URN时同时返回模型的名称、大小等元信息，方便前端做模型列表的交互管理

内容的提问来源于stack exchange，提问作者John Kuldeep Roshan Kerketta