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

2016.07.08

Google Cardboardの画面イメージ

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

気軽にVRコンテンツが楽しめる　Google Cardboard。

アマゾンで1000円くらいから売ってるビューワーのボックスに、iPhoneやスマホを設置するだけで、簡単にVRコンテンツが楽しめます。

その、cardboardで見られるVRコンテンツを作ってしまおう、というお話です。

iOSやAndroid用のアプリを作るのはちょっと敷居が高いですが、Three.jsでウェブ用のコンテンツとして作ってしまえば、あとはスマホとcardboardを用意するだけ！

まずはgoogle cardboardに対応したthree.jsのコンテンツを見てみましょう。

【サンプルコードをダウンロード】
googleのcardboardサイト、
https://vr.chromeexperiments.com

ここから「DOWNLOAD CODE」でサンプルコードをダウンロードします。

このファイルをそのままローカル環境では見られないので、ウェブサーバーなどにアップしてみます。

↓下記、ダウンロードしたファイルをそのままアップしたものです。
http://web3d.ag-works.biz/cardboard/

iPhoneなどをヨコにしてみてみると…

Google Cardboardの画面イメージ

この様に見えると思います。

あとはcardboard準拠の3Dメガネにセットして見てみましょう。

上下左右に動かして見てみれば…VRとして体験出来てるはずです！

さぁ、これでWEB3DがVR対応出来る事がわかりました。

次回は実際の制作について解説します。

iPhone&AndroidTECHWEBスマホ
shuzic

投稿者：shuzic

“スマホでお手軽にVR！Google CardbordとThree.jsでVR体験その①” への1件のコメント

  1. ピンバック: お手軽にVR！Google CardbordとThree.jsでVR体験その② | AGWORKS LIMITED

コメントをどうぞ

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

*

次の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へ