[Three.js]テスクチャに360度パノラマ動画を指定してhls.jsでストリーミング再生する

2019-10-118959 VIEW

Three.jsでvideo要素をテクスチャにする

いつの間にやらスマホ（iPhone）の動画再生が“全画面再生の呪縛”から解放されていたようだ。ちょっと前にトライして、まだ「時期尚早」として寝かせていたのだが…光陰如箭。

mp4では簡単に動作したのだが、どうせならパノラマ動画のストリーミング再生も試してみよう。こちらのサイトを参考に、ffmpegをインストールしてmp4からm3u8／tsファイルに変換しておく。

今回作ったもの

前回記事の判定を用い、iOS13+へは「“動作と方向”へのアクセス」の許可も行って「DeviceOrientationControls」を使用している。

少し工夫したと言えば、「Loading」要素を非表示にするタイミングか。ストリーミング再生と言えども、iPhoneで確認すると再生まで画面が固まったように感じたので、“再生時間が0秒以上”になるまで「Loading」を表示している。

flag_loader=true;
cv._loader.show();

：
：

（↓runAnimateの中）
if(flag_video){
  if(video.readyState>=video.HAVE_CURRENT_DATA){
    texture.needsUpdate=true;
  }

  //再生中
  if(!video.paused){
    //Loading要素が表示中か
    if(flag_loader){
      //再生時間が0秒以上ならLoading要素を非表示にする
      if(video.currentTime>0){
        flag_loader=false;
        cv._loader.hide();
        $("#btn_start").text("PAUSE");
      }
    }

    //再生時間セット
    set_playtime();
  }
}

なによりjavascript側で再生時間が把握・制御できるので、「●●秒後に効果音出して画面光らせる」とか「●●秒になったら説明ダイアログを表示」などもカンタン。
3Dオブジェクトの敵キャラ登場させてゲームにもできるし、Three.jsコンテンツ制作の夢は広がるばかりである。

勉強させてもらったサイト

ひとつ文句を言わせてもらうなら

「テストするからVR動画のファイルちょうだい」と言って、会社の後輩にパノラマ動画ファイルを用意してもらったのだが……

どうせなら、もっと「動画が再生されてる」ってわかりやすいのを選んでくれよ！
「湖の空撮」って、近距離の動きがなくて、「動画が再生されてる」って判断しにくかった。

今回使用したパノラマ動画はこの記事のチミケップ湖です。
「チミケップ湖（津別町）」も紅葉の絶景スポット。今年も観に行きたいなあ。

【PR】 Amazonで「Three.js」を探す！