RICOH THETAとJavaScriptでハコスコ用コンテンツを作るの巻

ハコスコは、iPhoneさえあればわずか1000円で実現できてしまうヘッドマウントディスプレイです。ただまだ視聴できるコンテンツがそれほど多くありません。
 
そんなわけで今回はRICOH THETAを使ってハコスコ用のコンテンツを自作してしまおうという企画です。
 

 
THETA用オレオレビューアライブラリthview.jsを最近アップデートしました。iPhoneの加速度センサーの情報を見て傾きに合わせて全天球画像を表示します。HTMLとJavaScriptだけなので、本格的な開発環境は不要でテキストエディタとウェブサーバだけあれば誰でも作れます。
WebGLの関係上、iOSのバージョンは8にする必要があります。
 
デモ1 戸棚の中

f:id:aike:20140930214741p:image

 
HTML的にはこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="three.min.js"></script>
    <script type="text/javascript" src="thview.js"></script>
</head>
<body>
    <div id="image1" style="position:absolute;top:0px;left:0px;"></div>
    <script type="text/javascript" >
        var img1 = new ThView({
            id:'image1',
            file: 'images/photo.jpg',
            width: 980,
            height: 560,
            zoom: 100,
            firstview: 90
        });
    </script>
</body>
</html>

 
また、THETAの公式アプリは最近のアップデートで、一定時間ごとに自動的にシャッターを切るインターバル撮影機能がつきました。そのためthview.jsにも連続写真をパラパラマンガ風に表示する機能をつけました。
 
デモ2 連続写真

f:id:aike:20140930214742p:image

 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="three.min.js"></script>
    <script type="text/javascript" src="thview.js"></script>
</head>
<body>
    <div id="image1" style="position:absolute;top:0px;left:0px;"></div>
    <script type="text/javascript" >
        var img1 = new ThView({
            id:'image1',
            file: [
                'images/R0010155.JPG',
                'images/R0010156.JPG',
                'images/R0010157.JPG',
                     :(省略)
                'images/R0010175.JPG'
            ],
            interval: 500,
            width: 980,
            height: 560,
            firstview: -90
        });
    </script>
</body>
</html>

画像はiPhoneのCPUパワー等を考慮して元画像よりも少し小さくした方が良いようです。
 
Oculus Riftみたいに両目で別々の画像を見る方が良いのかもと思ってthview.jsに hmd: true というオプションも用意しましたが、ハコスコの場合は両目で同じ画像を見るのがよさそうでした。
 
デモ3 両目別画像

f:id:aike:20140930214743p:image

 
Enjoy!
 

ハコスコ

ハコスコ