ブラウザでARやってみよう。 ~three.js編~

2014.09.20(土) AR
このエントリーをはてなブックマークに追加

さて、前回の続きですが、今回は矢印を出すためにつかった、three.jsの使い方を少し紹介します。three.jsとは、ブラウザ上で3Dオブジェクトをグリグリ動かすためのJavaScriptライブラリなのですが、この辺とか、この辺のサンプルとか見てるだけで、かなりワクワクします。かなり時間かかりますが、こちらのレーシングカーの走行シーンなんかもこれがブラウザか?って、びっくりです。ちょっと前までは、フラッシュとかでなきゃできなかったんですけどね。


Step1. いろいろなパラメータをさわってみよう

three.jsの概念や基本的な使い方は、以下のサイトが一番わかりやすくかかれていると思います。

細かい使い方や、パラメータ説明などは、以下のページが充実していますが、セキュリティ上の問題があるらしいので、閲覧は自己責任でお願いします。

3Dオブジェクトをブラウザ上で出すためには、およそ以下のステップが必要になります。

  • シーン(舞台)を作る
  • カメラの位置を設定する
  • 照明の位置を設定する
  • 3Dオブジェクトを置く

なんとなく、テレビを作るみたいな感じですね(いや、作ったことはないですが)。こちらのサンプルで、各パラメータによる変化がなんとなくわかると思います。

3Dオブジェクトを作成するときですが、本来はObject3Dクラスを利用して作成するのですが、それは非常に大変なので、ある程度決まった形のオブジェクトを生成するクラスが用意されています。



このほかにもまだいくつかあります。今回は矢印に一番近い形ということで、円柱を利用しています。

Step2. 3D版の方位磁石をつくろう

前々回、2D矢印による方位磁石を作りましたが、今回は3D矢印でつくってみます。


いかがでしょうか?矢印が北を指してますでしょうか?さて、次回はいよいよブラウザでカメラを起動する方法です。

コメントをどうぞ