20191014

three.jsのpdb_loaderを使って、カーボンナノチューブを表示した。

やったこと

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で書く。

L88-L111を、下記のように書き換えたら大体うまく動いた。
動くという意味では改善だが、原子の大きさや色などを反映しなくなった点で改悪。
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);
});

結果はこちら

pdb_loader_test.png

上の画面の様なCNTがクルクル回るのが、自分のインターネットブラウザの環境からは見える。

ネット上で3Dが動かせている。その内インタラクティブにもできるようになるだろう。

最終目標は、あくまでも「web、地震シミュ、VR」インタラクティブは、視点の移動位でいいかも。

posted by yuchan at 08:00 | Comment(0) | javascript