Cardboard実験サイト

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

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

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

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

このサイトについての解説をブログの載せていきます。

• デモサイト
• ソースコードダウンロード
• Cardboard実験サイト 
• Cardboard実験サイト 2.1 / HTMLサンプルの構成 
• Cardboard実験サイト 2.2 / HTML (iframe構成)
• Cardboard実験サイト2.3 / HTML (Photo1 - ステレオ写真)
• Cardboard実験サイト 3 / Threeサンプルの構成 
• Cardboard実験サイト 4.1 Gyro/Panorama 
• Cardboard実験サイト 4.2 Gyro/Cube1 (div構成)
• Cardboard実験サイト 4.3  Gyro / Cube2 (iframe構成)
• Cardboard実験サイト 5 / cardboard.jsに含まれる関数、変数 
• Cardboard実験サイト 6 / gyro.jsに含まれる関数、変数

以下、上記サイトのトップページです。

Cardboard

段ボール製３Dゴーグルで見る３DアニメをHTMLで作ろう、という実験サイトです。
ゴーグルがなくても立体視は可能です。
フリーの映像も多く出回っていますが、自分でも作ってみませんか？
このサイトと連動してブログに説明を載せていきます。

楽しみ方	画面操作について ３D画像を見る方法
HTML	HTML5のrotate/transleteを利用した3Dアニメ、写真
Three.js	WebGLを利用するJavaScriptライブラリのThree.jsを使った3Dアニメ。
Gyro	iOS/Android端末のGyroと連動する３６０°のパノラマ写真ビューワ。今のところ３Dではありません。
リンク	Cardboardで見る動画関連リンク
ダウン ロード	このサイトのjavascript等のダウンロード。

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