2015年4月2日木曜日

Cardboard実験サイト


Google / Cardboard仕様のハコスコを購入したので、これで見る3D画像をHTMLで作ってみました。

せっかくなので、iPhoneで見られる(多分Androidも可)Webサイトにしました。
Cardboard

Android端末でも動作可能ですが、あまりチェックしていません。動作不良の場合も、若干の修正で対応可能なはずです。

デスクトップのSafari/ChromeでもGyroscopeを使うもの以外は動作しますので、お試しください。

このサイトについての解説をブログの載せていきます。
以下、上記サイトのトップページです。
Cardboard
段ボール製3Dゴーグルで見る3DアニメをHTMLで作ろう、という実験サイトです。
ゴーグルがなくても立体視は可能です。
フリーの映像も多く出回っていますが、自分でも作ってみませんか?
このサイトと連動してブログに説明を載せていきます。
楽しみ方
  • 画面操作について

  • 3D画像を見る方法
HTML HTML5のrotate/transleteを利用した3Dアニメ、写真
Three.js WebGLを利用するJavaScriptライブラリのThree.jsを使った3Dアニメ。
Gyro iOS/Android端末のGyroと連動する360°のパノラマ写真ビューワ。今のところ3Dではありません。

リンク Cardboardで見る動画関連リンク
ダウン
ロード
このサイトのjavascript等のダウンロード。
  • iOS8のiPhoneが主対象です。Android端末でも動作可能ですが、あまりチェックしていません。
  • PC/MacではChromeで動作します。IEでも動作可能でが、あまりチェックしていません。
  • Safari/Macの場合はWebGLの有効化により、動作可能になります。
  • Three.jsを利用する場合はライセンスに従ってください。基本的に自由に利用できますが、再利用物にオリジナルのライセンスを同梱してください。Exampleなどには個別にライセンスが含まれるものもあります。
  • このサイトに含まれるその他のリソースについてはオリジナルのライセンス、または明記されていない場合は上記ライセンスを適用するものとします。