Loading...

トカチニッチ

北海道十勝の超ローカルウェブメディア「トカチニッチ」ニッチな情報毎日更新中!

Google翻訳

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

荒草

荒草

8190 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動画のファイルちょうだい」と言って、会社の後輩にパノラマ動画ファイルを用意してもらったのだが……

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

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

PRAmazonで「Three.js」を探す!


この記事が気に入ったら

※現在、こちらのコメント欄でのご質問・お問い合わせは受付けておりません。 恐れ入りますが、ご利用に関する不明点などは「お問い合わせフォーム」よりご連絡ください。

※投稿内容に関係のないコメントや、不適切な表現に該当すると判断したコメントは、投稿者に断りなく削除する場合があります。

試しに外国語に翻訳してみたけど、日本語の時と理解できる範囲が大して変わらなかったという新発見がありました。(報告)

なんか分からんけどすごいことはわかる!!!!!

>ffmpegをインストールしてmp4からm3u8/tsファイルに変換
↑ここで意識を失う

なんかスゲー!

>あれ? 見れない。
ちょっとLoadingに時間かかるので気長にお待ちくだされ

あれ? 見れない。

  • コメント
  • ランキング
  • オススメ
コメント一覧
ランキング一覧
オススメ一覧