3Dmol.js：把分子结构嵌入网页

3Dmol.js 是纯 JavaScript 的三维分子可视化库，无需插件、无需后端渲染，直接在浏览器里用 WebGL 展示分子结构。如果要做内部的对接结果查看平台、化合物数据库网页，或在文档里嵌入可旋转的结构，它几乎是最省事的选择。

最小可用示例

<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
<div id="viewer" style="width:640px;height:480px;position:relative;"></div>
<script>
const viewer = $3Dmol.createViewer("viewer", {backgroundColor: "white"});
$3Dmol.download("pdb:1AKE", viewer, {}, function () {
  viewer.setStyle({}, {cartoon: {color: "spectrum"}});
  viewer.zoomTo();
  viewer.render();
});
</script>

也支持完全声明式的用法：给 div 加 class="viewer_3Dmoljs" 和 data-pdb 等属性，不写一行 JS 就能渲染，适合嵌进 Markdown 文档或 CMS。

展示蛋白-配体复合物

const viewer = $3Dmol.createViewer("viewer", {backgroundColor: "white"});

fetch("/api/complex.pdb").then(r => r.text()).then(pdb => {
  viewer.addModel(pdb, "pdb");

  // 蛋白：半透明卡通
  viewer.setStyle({}, {cartoon: {color: "lightgrey", opacity: 0.8}});

  // 配体：棒状 + 按元素上色
  viewer.setStyle({resn: "MOL"},
                  {stick: {radius: 0.18, colorscheme: "greenCarbon"}});

  // 口袋残基：细棒
  viewer.setStyle({within: {distance: 4.5, sel: {resn: "MOL"}}, hetflag: false},
                  {stick: {radius: 0.1, colorscheme: "cyanCarbon"}});

  // 口袋表面
  viewer.addSurface($3Dmol.SurfaceType.VDW, {opacity: 0.7, color: "white"},
                    {within: {distance: 8, sel: {resn: "MOL"}}, hetflag: false});

  viewer.zoomTo({resn: "MOL"});
  viewer.render();
});

常用能力速查

做对接结果查看器的典型实现

// 把多个对接姿势作为帧，配滑块切换
viewer.addModelsAsFrames(sdfText, "sdf");
viewer.setStyle({model: -1}, {stick: {colorscheme: "yellowCarbon"}});

document.getElementById("poseSlider").addEventListener("input", e => {
  viewer.setFrame(parseInt(e.target.value));
  viewer.render();
  document.getElementById("scoreLabel").textContent = scores[e.target.value];
});

// 点击残基显示信息
viewer.setClickable({}, true, (atom) => {
  viewer.addLabel(atom.resn + atom.resi, {position: atom, backgroundColor: "black"});
  viewer.render();
});

把对接输出的多姿势 SDF 直接作为帧加载，配一个滑块和分数标签，就是一个可用的姿势浏览器——这是内部平台里最常见的需求，几十行 JS 即可完成。

实践注意

• 生产环境自托管 JS：不要依赖外部 CDN，把 3Dmol-min.js 放进自己的静态资源，避免网络与可用性问题。
• 容器要有明确尺寸：div 必须设 position: relative 和确定的宽高，否则渲染异常——这是最常见的踩坑点。
• 大结构性能：超大体系或复杂表面在低端设备上会卡，必要时降级到卡通表示或只渲染口袋区域。
• 改动后要 render()：所有样式修改都需要显式调用 viewer.render() 才生效。

延伸资源

• 桌面可视化：211《PyMOL 开源版》；Notebook 可视化：212《NGLView》；
• 工程化与内部平台：225《AI 制药工具工程化》。