JSmolで結晶をブラウザで表示する
CODで結晶構造をブラウザで表示できるのが面白いと思ったので、やり方を調べた。
JSmol
https://sourceforge.net/projects/jmol/files/から最新版のJmolを取ってくる
zipを解凍して
jmol-14.29.46
みたいなディレクトリを得る(以下このバージョンのjmolを使うとする)。以下のようなディレクトリ構成にする
. +-- data.cif // 表示したいcifファイル +-- JSmol.min.js // jmol-14.29.46/jsmol/JSmol.min.js をコピーしてくる +-- idioma // jmol-14.29.46/jsmol/idioma をコピーしてくる(英語のみ使用する場合は要らないらしい) +-- j2s // jmol-14.29.46/jsmol/j2s をコピーしてくる +-- index.html
index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="JSmol.min.js"></script> </head> <body> <h1>JSmol Test</h1> <script type="text/javascript"> const Info = { color: "#FFFFFF", // white background (note this changes legacy default which was black) height: 400, // pixels (but it may be in percent, like "100%") width: 400, use: "HTML5", // "HTML5" or "Java" (case-insensitive) j2sPath: "./j2s", // only used in the HTML5 modality script: "load ASYNC data.cif {1, 1, 1}", // script to run defaultModel: "", // name or id of a model to be retrieved from a database addSelectionOptions: false, // to interface with databases disableInitialConsole: false, // shows a bunch of messages while the object is being built debug: true }; Jmol.getApplet("myJmol", Info); </script> </body>
動作例
↑のindex.html
で表示される例
Materials projectのMaterials Explorerみたいに配位多面体を表示できるとよりよいけどJ(S)molの範囲で実現できるのか分からない。
できてないこと
index.html
中のJSのコードをindex.js
みたいなファイルに分離しようとすると
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
と怒られる。
↓とかが関連しそうだけど解決できてない。 lucybain.com