やったこと
three.jsを使って、pdbファイルのカーボンナノチューブを表示した。
カーボンナノチューブのpdbファイルは、vmdというソフトを使って書き出した。
参考図書に、「はじめてのThree.js」を使ったけれど、pdb_loaderがうまく動かなかった。
githubのサンプル通りに、書いたのに（もちろん一部改変しなければいThree.jsのアドレスとかの所は改変した）表示されなかった。
どうも、この部分、https://github.com/josdirksen/learning-threejs/blob/85f85aeb137f0b01ba96c8b1bfd7019134e596ef/chapter-08/12-load-pdb.html#L88-L111
が動いてくれていない。
コードの中で、geometry.vertices.forEachとか書いてあるけど、「geometry以下にverticesがない」様な事を示唆するエラーが出てくる。（undefinedがどうとか）
ググったら
(https://threejs.org/docs/#examples/en/loaders/PDBLoader)
が関係ありそうだったので見た。
公式refereceではコールバック関数が一つ。
対する「はじめてのThree.js」では二つ。
書籍だから、たぶん情報が古い。昔はこれで動いたんだろう。
コールバック関数を一つにして再度チャレンジ。
この関数から、
- コールバック関数名.geometryAtoms
- コールバック関数名.geometryBonds
- コールバック関数名.json
という感じの3つのデータが取り出せる。
しかし、jsonに原子と結合手のデータが全部入っていたので、そっちを使った。
変更前
- 原子を元素名ごとに色分けしてsphereで表示してた
- 結合手をsylinderで表示してた
変更後
- 原子はすべて単色、
- 結合手は、lineで書く。
var loader = new THREE.PDBLoader();
var group = new THREE.Object3D();
var json=loader.load("http://adoresu-wo-ireru.sakura.ne.jp/sblo_files/anatano-no-saito-no-namae/tekitouna_foruda_demo_tukure/nanotube.pdb", function (geometry) {
var json = geometry.json;
for (var j = 0; j < json.atoms.length; j += 1) {
var sphere = new THREE.SphereGeometry(0.1,8,8);
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var mesh = new THREE.Mesh(sphere, material);
mesh.position.set(json.atoms[j][0], json.atoms[j][1], json.atoms[j][2]);
group.add(mesh);
};
for (var j = 0; j < json.bonds.length; j += 1) {
var material2 = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
eval("var ln" + j + "= new THREE.Geometry();");
// console.log(json.bonds.length)
ii=0;
json.bonds[j].forEach(function(element) {
if (ii != 2) {
var aaa = element
eval("ln" + j + ".vertices.push(new THREE.Vector3(json.atoms[aaa][0], json.atoms[aaa][1], json.atoms[aaa][2]));");
// console.log(aaa);
ii+=1;
};
var material4 = new THREE.LineBasicMaterial({color: 0x0000ff});
eval("var line" + j + "= new THREE.Line(ln" + j + ", material4 );");
eval("group.add( line" + j + " );");
});
};
scene.add(group);
});
上の画面の様なCNTがクルクル回るのが、自分のインターネットブラウザの環境からは見える。
ネット上で3Dが動かせている。その内インタラクティブにもできるようになるだろう。
最終目標は、あくまでも「web、地震シミュ、VR」インタラクティブは、視点の移動位でいいかも。
