この記事はThree.js Advent Calendar 2016の17日目の記事です。

どうもこんにちわ、梨原です。

なんかやるかーと思って勢いで予定をいれてしまってすみません。かなりてきとうに作りました。(まだ一日あいてるしいいよね)

今回はRICOH THETAで撮影した360度動画をthree.jsで表示するだけのもの作りました。
ほんとは動画のプログレスとかいじりたかったんだけど間に合わなかった...
まぁ動画をいじる場合は普通にvideoタグ取得してメソッド叩くだけなので難しくないです。

エクレクタンギュラー

そもそも360度動画とはなんでしょう？
それは、3D空間上にある球体のオブジェクトに貼り付けたときに違和感なく360度が見渡せる動画、です。
これはかなりざっくりとした個人的な解釈なので細かい所は間違ってるかもしれませんが、まぁこんな感じです。

では、そんな動画はどういう形式かっていうと、エクレクタンギュラーと呼ばれるアスペクト比 2:1 の動画になります。
YouTubeとかFacebookとか、他の360度動画に対応しているところもエクレクタンギュラー形式で扱ってるはずです。

なので普通のプレイヤーで再生してしまうとすごい歪んだ映像がみれるはずです。
これの作成方法はRICOHが公式で出しているアプリケーションがあるのでそれで変換できます。

SphereGeometry

それでは、そのエクレクタンギュラーの動画をどうやって表示するかというと、
通常three.jsではgeometryとtextureを使って表示すると思いますが、今回も全く同じです。
three.jsにはSphereGeometryとVideoTextureが用意されているのです。やったぜ。

ただ1つ注意点があって、SphereGeometryを普通に作ると外側にテクスチャが貼られます。
しかし今回は円の球の内側にカメラを配置して見るので、内側にテクスチャをはる必要があります。
その場合、 sphereGeo.scale(-1, 1, 1); な感じでテクスチャを貼る方向を逆にしてあげます。

まとめ

あとはいつもどおりです。
おめでとう！これであなたも自分だけのTHETA動画プレイヤーが作成できました。
ちょっと雑ですがこんな感じです。全体のソースコードはGistにあげておきました。
あ、作ったときにはNode使ってますのでお気をつけて。

Gist

ThetaVideoViewer.js