Interactive Molecular Visualization

py3Dmol

RDKitや量子化学計算の出力をJupyter・Google Colab上で対話的に表示し、構造、配座、atom情報、三次元scalar fieldを確認します。

位置づけ: Notebook・Web molecular viewer
主な入力: XYZ、SDF/MOL、PDB、cube
主な出力: WebGLによる対話的3D表示

1. 概要

py3DmolはWebGL molecular viewerである3Dmol.jsをPython Notebookから操作するwrapperです。構造計算や結合認識の検証を行うprogramではなく、渡された分子dataとpropertyを表示します。

Jupyter/Colab内で回転・zoomできるため、配座生成直後の目視検査、反応中心のatom index確認、cube fieldの探索に適します。

2. 導入

Notebook

!pip install py3Dmol rdkit

import py3Dmol
from rdkit import Chem
from rdkit.Chem import AllChem

Notebook環境が外部JavaScriptを読み込める必要があります。再現性のためpy3Dmolと3Dmol.jsのversionを記録し、長期保存用には座標dataも別fileで保持します。

3. XYZ・SDF・PDBの表示

Python

xyz = open("xtbopt.xyz").read()

view = py3Dmol.view(width=720, height=460)
view.addModel(xyz, "xyz")
view.setStyle({"stick": {"radius": 0.16}, "sphere": {"scale": 0.25}})
view.setBackgroundColor("white")
view.zoomTo()
view.show()

XYZには明示的な結合表がないため、viewerによる距離ベースの結合推定が意図と異なる場合があります。結合次数や芳香族性が重要ならSDF/MOLを使います。

4. RDKit Molとの連携

Python

mol = Chem.AddHs(Chem.MolFromSmiles("CC(=O)c1ccccc1"))
params = AllChem.ETKDGv3()
params.randomSeed = 20260804
AllChem.EmbedMolecule(mol, params)
AllChem.MMFFOptimizeMolecule(mol)

mol_block = Chem.MolToMolBlock(mol)
view = py3Dmol.view(width=720, height=460)
view.addModel(mol_block, "mol")
view.setStyle({"stick": {}, "sphere": {"scale": 0.22}})
view.zoomTo()
view.show()

py3Dmol例をダウンロード

5. 複数配座の比較

同一Mol内のconformerを個別のmodelとして追加し、modelごとに表示・非表示やstyleを変えられます。

Python

view = py3Dmol.view(width=720, height=460)
for model_index, conf in enumerate(mol.GetConformers()):
    block = Chem.MolToMolBlock(mol, confId=conf.GetId())
    view.addModel(block, "mol")
    view.setStyle(
        {"model": model_index},
        {"stick": {"colorscheme": "cyanCarbon", "radius": 0.10}},
    )
view.zoomTo()
view.show()

重ね合わせ前にRDKit等でalignmentを行います。py3Dmol上で見た重なりだけをRMSDの代わりにしません。

6. Atom選択、label、measurement

element、atom index、residue、model等で選択し、反応中心を強調できます。

Python

view.setStyle({"elem": "O"}, {"sphere": {"color": "red", "scale": 0.35}})
view.addLabel(
    "carbonyl oxygen",
    {"position": {"x": 0.87, "y": 1.05, "z": 0.0},
     "backgroundColor": "white", "fontColor": "black"},
)
view.addLine({
    "start": {"x": 0.26, "y": 0.0, "z": 0.0},
    "end": {"x": 0.87, "y": 1.05, "z": 0.0},
    "color": "black",
})

座標をhard-codeする場合は表示中geometryと一致させます。atom indexは0-based/1-basedの違いを明示します。

7. Cube dataと等値面

3Dmol.jsはcube形式のvolumetric dataを読み、orbital、density、ESP等の等値面を表示できます。

Python

cube_data = open("dual.cube").read()

view = py3Dmol.view(width=720, height=520)
view.addVolumetricData(cube_data, "cube", {
    "isoval": 0.002,
    "color": "blue",
    "opacity": 0.65,
})
view.addVolumetricData(cube_data, "cube", {
    "isoval": -0.002,
    "color": "red",
    "opacity": 0.65,
})
view.zoomTo()
view.show()

NCIのように一つの等値面を別のscalar fieldで連続着色する高度な表示は、APIとversionによる制約を確認します。研究図の作成ではVMD等も併用し、isovalueとカラーレンジを固定します。

8. Web掲載と検証

Container sizewidth・heightを明示し、0 px canvasを防ぐ。
WebGLdesktop/mobileでcanvasが非blankか確認。
Touch回転、zoom、scrollとの競合を確認。
Data size大きなSDF/cubeは初期表示とmemoryを圧迫。
Fallback静止画、caption、download linkも用意。

ホームページへの将来展開

研究ページに小さなinteractive viewerを置き、環状ketoneの配座やNCI/IGMH結果を切り替える機能へ発展できます。まずは軽量な代表構造で描画負荷とmobile操作を検証します。

9. 参考文献・公式資料

3Dmol.js, Official documentation.
py3Dmol, Official source.
N. Rego and D. Koes, “3Dmol.js: molecular visualization with WebGL,” Bioinformatics 2015. DOI

計算化学ノートの入口へ戻る