前端使用分子相关库

之前是针对 AF3 做了生物大分子预测，使用了rcsb-molstar；近期遇到新需求，要做分子性质和器件性质预测，使用了 3Dmol.js。
本文对使用的库进行总结。

对比

维度	rcsb-molstar (Mol*)	RDKit-js	3Dmol.js
主要对象	蛋白质、核酸、复合物、冷冻电镜密度	小分子、药物化学	通用小分子/蛋白，体积数据
输入格式	PDB/mmCIF, BinaryCIF, SDF, MOL2, DCD 轨迹	SMILES→2D/3D	SMILES, SDF, PDB, MOL2, 体积
功能亮点	结构对齐、轨迹播放、密度图、对称性、实体注释	高质量 2D 绘制、化学感知	轻量、快速嵌入、支持体积
包体大小	较大（功能全，按需分包）	~3 MB	~1 MB
典型 URL	https://www.rcsb.org/3d-view/1RB8	无官方托管	无官方托管
是否 standalone	提供 standalone viewer 可以本地部署	可以 standalone HTML	可以 standalone HTML

1. AF3：rcsb-molstar 是 RCSB PDB 官方基于 Mol*(MolStar) 核心做的一层“定制外壳”，专门用来在 rcsb.org 上展示蛋白质、核酸等大分子结构，在需要展示的页面动态引入。ketcher 使用standalone模式引入，用于分子结构绘制。
2. 器件性质：RDKit，3Dmol

如何选择

• 只看小分子 2D/快速 3D → RDKit-js（2D 极清）或 3Dmol.js（3D 轻量）。
• 需要 PDB 大分子 + 对齐 + 轨迹 + 密度 → rcsb-molstar（Mol*）。
• 想离线/内网部署 → 三者都可下载对应 .js + .wasm 本地引用，实现“完全 standalone”；rcsb-molstar 也提供 npm run build 后的 dist 目录一键起静态服务。

React + umi 框架下使用 3Dmol.js 实践

1. 在 public/3Dmol 文件下加入 3Dmol-min.js 和 3Dmol.ui-min.js 两个文件（离线使用速度快）；
2. 在 .umirc.ts 中加入

   headScripts: [
     { src: '/3Dmol/3Dmol-min.js'},
     { src: '/3Dmol/3Dmol.ui-min.js'}
   ]

3. 使用
   官方 demo，实测生产环境有环境，暂时无法渲染。

   <div
     style={{ height: '400px', width: '400px', position: 'relative' }}
     className="viewer_3Dmoljs"
     data-pdb="2POR"
     data-backgroundcolor="0xffffff"
     data-style="stick"
     data-ui="true"
   ></div>

   官方下载后渲染，实测出了速度慢，渲染没问题。

   const Device = () => {
     const containerRef = useRef<HTMLDivElement>(null);
     const $3Dmol = window.$3Dmol;
   
     useEffect(() => {
       const element = containerRef.current;
       if (element && $3Dmol) {
         let viewer = $3Dmol.createViewer(element, {
           backgroundColor: 'white',
         });
   
         $3Dmol.download(
           'pdb:1MO8',
           viewer,
           { multimodel: true, frames: true },
           function () {
             viewer.setStyle({}, { cartoon: { color: 'spectrum' } });
             viewer.render();
           },
         );
       }
     }, [$3Dmol]);
   
     return (
       <Flex className={styles.mainContainer} vertical flex={1}>
         <div
           ref={containerRef}
           style={{
             height: '400px',
             width: '400px',
             position: 'relative',
             border: '1px solid #ccc',
           }}
         ></div>
       </Flex>
     );
   };

standalone

“standalone” 这个词在网页/前端语境里通常表示「一个文件就能跑」，不需要额外后端服务，也不需要把库拆成很多 chunk。

1. 把 HTML 保存后直接双击即可在浏览器打开，所有依赖（rdkit.js、3Dmol.js、wasm、css）都是从 CDN 一次性拉取，本地不需要任何服务器或打包工具。
2. 如果你想“更 standalone”——离线也能跑，只要把 CDN 资源下载到本地即可：

• 把 换成下载下来的本地文件，如
• 同理，把 3Dmol 的 CDN 链接换成本地 3Dmol-min.js。
  最终目录结构可能只有：

  index.html
  lib/
    RDKit_minimal.js
    RDKit_minimal.wasm   # 如果 RDKit 需要
    3Dmol-min.js

  这样即使断网，浏览器也能正常渲染 2D/3D 结构——这就是“完全 standalone”。

附录：

1. 3Dmol
2. 3dmol.js在React中直接使用
3. rdkit.js for react 官方
4. rdkit.js for react 源代码