17370845950

本文解决 bootstrap 折叠组件（collapse）中 ngl 3d 查看器需双击才生效的问题，核心方案是延迟初始化 stage 实例，确保 dom 元素已完全展开并渲染完毕。

在使用 Bootstrap 的 .collapse 类实现“点击展开 + 加载 3D 视图”交互时，常见问题在于：用户首次点击“Show 3D”，折叠区域开始展开动画，但此时

尚未完成渲染（仍处于 display: none 或尺寸为 0 的过渡状态），导致 NGL.Stage 初始化失败或渲染异常——表现为无响应、白屏或需二次点击才生效。

根本原因在于：NGL.Stage 构造函数依赖目标容器的实际宽高与可见性。若容器尚未完成 CSS 过渡、仍不可见或尺寸为 0，NGL 无法正确初始化 WebGL 上下文，进而导致 loadFile() 调用静默失败或视图不渲染。

✅ 正确解法不是等待“DOM 插入”，而是等待折叠动画结束且容器可测量。推荐使用 setTimeout 延迟执行初始化（配合 Bootstrap 的 shown.bs.collapse 事件更稳健）：

⚠️ 注意事项：

• 避免 0 延迟：setTimeout(fn, 0) 仅保证异步，不保证 DOM 已完成渲染，仍可能失败；

• 优先监听事件：生产环境建议改用 Bootstrap 提供的 shown.bs.collapse 事件，精准捕获展开完成时机：

  document.getElementById('_show_0').addEventListener('click', function() {
    const targetId = 'show_0';
    const viewportId = 'viewport_0';
    const pdbPath = 'https://alphafold.ebi.ac.uk/files/AF-P08047-F1-model_v4.pdb';
  
    // 确保只绑定一次
    const collapseEl = document.getElementById(targetId);
    const shownHandler = () => {
      collapseEl.removeEventListener('shown.bs.collapse', shownHandler);
      showPDB(pdbPath, viewportId);
    };
    collapseEl.addEventListener('shown.bs.collapse', shownHandler);
  });

• 资源预加载优化：对关键 PDB 文件，可在页面加载时预取（），减少点击后等待时间；

• 错误兜底：务必添加 .catch() 处理网络或格式错误，避免静默失败。

总结：单击即生效的关键，在于将 NGL 初始化逻辑推迟至折叠容器真实可渲染之后。setTimeout 是快速验证方案，而 shown.bs.collapse 事件是更健壮、语义清晰的工程实践。二者均能彻底解决“双击才能加载”的体验缺陷。