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);
});

結果はこちら

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

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

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

​