Hatena::ブログ(Diary)

aikeの日記 RSSフィード

2014-07-26 全天球パノラマ動画を表示するJavaScriptライブラリ作った

複数台のGoProを組み合わせて360度上も下も撮影できる動画カメラが一部で流行りつつあるようです。

こんなやつ。

http://home360.co.jp/freedom360.html

http://freedom360.us/

 

要はRICOH THETAの動画版なんですが、動画ということで機材の価格もだいぶ違うし、複数の動画を合成する作業もまだまだけっこう手間も時間もかかります。

 

そこまで頑張って動画を作っても、公開がまた大変です。フリーのスタンドアロンプレイヤーはありますが(これとか)、見る人にインストールさせるのはちょっと面倒だし、Flashで作られた全天球動画プレイヤーも良いものがいろいろあるものの、自由にダウンロードできて自分のサイトで手軽に使えるものは今はちょっとなさそうです。

 

そんなわけでJavaScriptのThree.jsを使ってさくっと全天球動画プレイヤーを作ってみました。

 

http://sound.jp/aike/paview/

https://github.com/aike/paview.js

クリックでデモページへ移動

音が出ます。Chrome推奨、Firefox不可、SafariWebGLを有効にする必要があるかも。

 

ドラッグしてカメラの向きを変えたり、ホイールでズームしたりできます。水平の調整やファーストビューの指定もできます。シンプルな作りだし、MITライセンスなので自由に改変して使ってください。

 

※ついでに前回つくったRICOH THETA画像表示用JavaScriptライブラリの方もドラッグでカメラ向きを変えられるようにしました。