NodeJS环境下Forge应用BIM 360 Viewer项目下拉选择实现咨询

1. 前置检查 #

• Forge 应用已申请data:read、account:read权限，且完成3条腿OAuth授权配置
• 前端已完成Forge Viewer基础初始化，可正常加载资源
• 已获取对应BIM 360账户的账户ID

2. 后端接口实现（NodeJS 端） #

以Express框架为例，封装接口拉取当前授权用户可见的所有BIM 360项目：

const express = require('express');
const { AuthClientThreeLegged } = require('forge-apis');
const router = express.Router();

// 初始化Forge 3腿授权客户端
const forgeAuthClient = new AuthClientThreeLegged(
  process.env.FORGE_CLIENT_ID,
  process.env.FORGE_CLIENT_SECRET,
  process.env.FORGE_CALLBACK_URL,
  ['data:read', 'account:read']
);

// 获取项目列表接口
router.get('/api/forge/projects', async (req, res) => {
  try {
    // 从会话中读取当前用户的访问令牌
    const accessToken = req.session.forgeAccessToken;
    const accountId = process.env.BIM360_ACCOUNT_ID;
    
    // 调用Forge接口拉取项目列表
    const resp = await fetch(`https://developer.api.autodesk.com/construction/projects/v1/accounts/${accountId}/projects`, {
      headers: { 'Authorization': `Bearer ${accessToken}` }
    });
    const rawProjects = await resp.json();
    // 筛选下拉需要的字段返回，减少冗余数据
    const projectOptions = rawProjects.data.map(item => ({
      id: item.id,
      name: item.attributes.name
    }));
    res.json(projectOptions);
  } catch (err) {
    res.status(500).json({ error: '项目列表拉取失败' });
  }
});

3. 前端下拉组件集成 #

在Viewer所在页面插入下拉组件，调用后端接口填充选项：

<!-- 下拉容器，固定在Viewer上方 -->
<div style="position: absolute; top: 12px; left: 12px; z-index: 100;">
  <select id="project-select" style="padding: 6px 12px;">
    <option value="">请选择项目</option>
  </select>
</div>

document.addEventListener('DOMContentLoaded', async () => {
  const selectEl = document.getElementById('project-select');
  // 拉取项目列表填充下拉
  const resp = await fetch('/api/forge/projects');
  const projectList = await resp.json();
  projectList.forEach(project => {
    const option = document.createElement('option');
    option.value = project.id;
    option.textContent = project.name;
    selectEl.appendChild(option);
  });
  // 监听选择事件，可扩展加载项目对应模型的逻辑
  selectEl.addEventListener('change', (e) => {
    const selectedProjectId = e.target.value;
    if (selectedProjectId) {
      // 此处补充拉取项目下模型、加载到Viewer的逻辑即可
    }
  });
});

4. 注意事项 #

• 若接口返回空列表，优先检查授权用户是否已加入对应BIM 360项目的成员列表，以及访问令牌是否包含account:read权限
• 下拉容器的z-index需高于Viewer的canvas层级，避免被遮挡

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