Three.jsで作る太陽系シミュレーター(準備編)

科学技術館で毎週土曜日に行われている科学ライブショー「ユニバース」には、太陽系の様子をリアルタイムに計算してドーム上に投影する「太陽系の姿」と呼ばれるコーナーがあります。現在は3次元化し天球に対応するドームに投影していますが、2002年までは2次元かつ平面スクリーンに投影していました。最近のブラウザはWebGLと呼ばれる技術をサポートしており、この一昔前の太陽系シミュレーター(太陽系の姿で使われるシミュレーションエンジン)くらいであれば、ブラウザ上で動作させることができるようになっています。ここでは、この一昔前の太陽系シミュレーターをWebGLを用いて作っていく過程で調べたことを、メモしていこうと思います。

Three.jsとは

WebGLは、OpenGLをJavaScriptから利用できるようにしたAPI群で、ブラウザー上で3Dグラフィックスを動かすためのものです。2013年現在、Chrome、Firefox、Safariなどのブラウザが対応していますが、Internet Explorerは対応していません。JavaScriptからWebGLを直接利用することも可能ですが、ラッパーであるThree.jsを使うと、JavaScriptの流儀で3Dの世界を簡単に実現することができます。ただし、Three.jsが注目されたのが2011年頃だったこともあってウェブ上の情報は古くなっていますし、日本語の情報も少なく、また、サンプルページも削除されてしまっているものが増えています。さらに、Three.js自身のドキュメントがあまり充実しておらず、実例のソースを分析して自分なりに調べる必要があります。そこで、このシリーズでは、2013年6月18日現在で最新の Three.js(r58)について調べたことを日本語でメモしようと思っています。

最初のサンプル

Three.jsは、threejs.orgからダウンロードすることができます。ダウンロードしたZIPファイルは75MBくらいありますが、そのほとんどは、サンプルのコードです。実際に利用するには、HTMLのヘッダー等から、buildフォルダ中のthree.min.jsファイルを読み込めば十分です。また、マウスの動きに対応するためのTrackballControls、Three.jsの統計情報を表示するstatsも使うと便利ですので、examples/jsフォルダも一式コピーしておきます。ここまでで、以下のようなHTMLファイルを作ることができ、これが最初のひな形となります。

続いて、上記で/* ここに処理を書く */とした部分に以下のスクリプトを追加します。ここでは、ひとまず背景を黒単色で塗りつぶした3D空間を用意し、直方体を一つ置いています。なお、簡単のため、距離の単位は1=1天文単位(AU)としています。

これを実際のHTMLとして保存し実行できるようにしたものがこちらです。オレンジ色の立方体と、XYZ軸(X軸がR、Y軸がG、Z軸がBに対応)が表示されています。これをテンプレートとして、sceneオブジェクトに対し、太陽系や銀河系の様々な天体をオブジェクト(Meshのインスタンス)として追加していくことになります。
145.html
(続く)


leave your comment