Blog

Three.jsで360°パノラマ動画を表示する

Three.js を使うと、簡単に WebGL による 3D の描画ができ、360°パノラマのビューアーを作ることもできます。

これは、球体に360°のパノラマ画像をテクスチャとして設定することで実現していますが、
Three.js ではこのテクスチャに動画を指定することもできるので、
360°動画のプレイヤーを作ることも比較的簡単にできてしまいます。

公式の DEMO でも見ることができますが、
こちらは VR のみで操作可能で、ドラッグやスワイプでの操作はできないようでしたので、
ドラッグやスワイプで操作できるものを作ってみました。

↓ 作ってみたもの

DEMO (動画サイズ 11MB-)

 

↓こちらの360°のパノラマ動画を使わせていただきました。

Free 360 Video Downloads Page | 360/VR Master Series | Mettle

 

作り方

HTML で Three.js の読み込みと要素の準備

HTML で動画を配置する場所を用意し、
公式サイトからダウンロードした Three.js のファイルをサーバーに配置し、読み込みます。

video 要素を JavaScript で生成し、動画のテクスチャを生成

JavaScript 上で video 要素を生成します。playsinline 属性を指定するのがポイントとなり、これにより、全画面で動画が再生されてしまうのを防ぐことができます。

video 要素を生成したら、その video 要素からテクスチャを生成します。
そのままではテクスチャが静止画になってしまうので、setInterval で動画の状態に合わせてテクスチャを更新するように設定します。

球体にテクスチャを設定し、シーンに追加

球体をカメラの周りを囲むように設定し、テクスチャとして、先程の動画のテクスチャを指定します。

レンダリング、ドラッグ・スワイプ操作の設定

あとはドラッグ・スワイプの操作を設定して、レンダリングすれば完成です。
このように Three.js では、依然ご紹介したことのある静止画の 360°ビューアーを作るときとほぼ同じ手順で、360°動画のビューアーを作ることができます。

オリジナルの360°動画ビューアーが必要な場合には、とても重宝しそうです。

 

JavaScript コード全文

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ