THETAとPannellum

親会社のDX担当さんに「旧型だし、使っていないなら頂戴よ」なんて軽口を言っていたら、本当に頂いてしまった「THETA S」。
ありがとうございます。まだまだ現役で実用できるお宝です。

360°動画はとても重たいし、撮影者の視界の外まで映すので、映ってはいけないものが映っていたり(ガクブル)、正直あまり利用シーンは多くないかもしれませんが、360°静止画をパノラマで表示するのは、我が社の作業風景を紹介する上でとても有効だと思っています。
なぜなら我が社の現場はどこも風光明媚な場所だから。

一つネックなのは、THETAで撮影した360°コンテンツをWEBで公開するには有料プラン(THETA360.biz)に加入する必要があること。きっと色々な機能が使えて素晴らしいサービスなのだろうと思いますけど。。。

シンプルにパノラマ写真をページに掲載したいだけなので、いつも通り無料のヤツを検索。
すると、「Pannellum」ってクールなツールを発見したので、早速実装してみました。

こだわったのは360°のアイコンをオーバーレイで表示させたところ。
折角のギミックですから、「こいつ…動くぞ!」と、しっかり主張することが大事だと思います。

追記(ShortcorderとPannellumの設定)

今後、投稿する際にPannellumを組み込むことが増えるかもしれないので、ショートコード化することにしました。そこで導入したプラグインが「Shortcorder」。↓ショートコードの例↓

[sc name="pannellum" imageurl="/test.jpg"][/sc]

初めて使いますが、なるほど便利なものですね。この例は、カスタムパラメータ(”imageurl”)に画像URL(”/test.jpg”)を代入して使用しています。代入する画像URLを変更すれば、違うパノラマ画像を表示できるので超楽チンです。

Pannellumは公式ページ(https://pannellum.org/  )に使い方の説明とサンプルがありますから、実装の難易度は高くないです。ここでは色々パラメータを試してみたかったのでiframeではなくAPIを使用しています。
360°アイコンのオーバーレイは、ChatGPTに教えてもらいました。
プロンプトは「pannellumで生成する div panorama にpng画像をオーバーレイしたい。」です。
あっという間にコードを吐き出してくれます。
いやはや、すごい時代です。はい。。。

ちなみに、THETAで撮影した動画からpannellum用の静止画を保存するには、Windows標準の「フォト」を使えば簡単にできます。
「フォト」でMP4を再生したら、お好みのフレームで一時停止。メディアコントローラにある「”…”ボタン(その他のオプション)」をクリックして「フレームの保存」でOK。

関連記事

最近の記事 おすすめ記事
  1. 4年ぶりの社員旅行を企画中です

  2. position sticky と ScrollHint

  3. THETAとPannellum

  1. 登録されている記事はございません。
O-TAKA GROUP
三和ボーリング株式会社
https://sanwa-boring.co.jp/
Screenshot of sanwa-boring.co.jp

TOP
TOP