Webチームの蔵下です。弊社で開発しているintdashには、Media Servicesという動画や音声などのメディアデータを扱うサービスがあります。さまざまなカメラに対応できることもあり、RICOH THETAのような360°カメラで撮影した動画を扱うこともあります。
「全天球画像 | RICOH THETA」より引用
▲360°動画。360°の映像が1つのパノラマ動画内に収められています。歪みを補正して再生するためには、専用の動画Playerが必要になります。
この360°動画をブラウザで再生する360°動画Playerを、JavaScriptの3Dフレームワークであるthree.jsで開発しました。
本記事では、360°動画Playerを開発するときの実用的なTIPSを紹介します。
- 360°動画Playerの仕組み
- 実用TIPS集
- TIPS1: three.jsのRenderingとVideo描画でLoop処理を分離する
- TIPS2: Playerの外からPitch, Yaw, Zoomを操作できるようにする
- TIPS3: 動作テストはStorybookで実装する
- おわりに