スマホでお手軽にVR!Google CardbordとThree.jsでVR体験その②

2016.07.11

こんにちはエージーワークス代表の増本修二です。

前回の記事、
お手軽にVR!Google CardbordとThree.jsでVR体験その①
http://www.ag-works.com/blog/google-cardbord-three-js/
のつづきです。

簡単にVRを体験出来るGoogle Cardboard。

そのコンテンツをThree.jsで作ってみます。

【サンプルコンテンツの中身】

まずはダウンロードしたコンテンツの中身です。

googleのcardboardサイト、

https://vr.chromeexperiments.com

ここから「DOWNLOAD CODE」でダウンロードした中身が下記になります。

three.js以外、必要なファイルは下記の3つになります。
・DeviceOrientationControls.js
・OrbitControls.js
・StereoEffect.js

・DeviceOrientationControls.js
このライブラリでスマホの回転を取得します。

・OrbitControls.js
Three.jsで簡単にUIを追加出来るライブラリです。

・StereoEffect.js
画面を2分割し、立体視表示させるライブラリです。

【実際のコードについて】

実際のサンプルコードを見ていきましょう。

まずはVR表示として2画面表示させる部分。

ステレオ表示するためのオブジェクトをrendererを引数に生成します。

そして、通常

などとするところを、代わりに

として、2画面に表示させるeffectを使用します。

次にスマホの向き、回転を取得する部分。

DeviceOrientationControlsオブジェクトを生成し、deviceorientationイベントを取得します。
つまり、スマホの回転、deviceorientationイベントが発生するたびにsetOrientationControlsを実行し、スマホの角度に合わせてcontrolsを定義しています。

これだけででGoogle CardboardでVR表示が可能になります。

思いの外簡単だったのではないでしょうか。

あとはオブジェクトやアニメーションを自由に設置して、VRコンテンツを作ってみましょう!

shuzic

投稿者:shuzic

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

TOPへ