プログラミング教育

360°パノラマ博物館サイト制作に関するプログラミング解説(2022.11.1追記)

使用機器:360°カメラはリコー THETA SC2で撮影,360°画像ビューアPannellum(無料)を使用

以下のiframeタグを埋め込むことで簡単に表示できます。(博物館や3年B組のページではiframeではなくAPIを使っています。)

step01:360°画像をアップロードし,そのURL(絶対パス)をメモする。
確認作業としてここへアクセスすると画像は見えますが,まだ,360°には見えませんね。
https://teien.hst.titech.ac.jp/photo/class-images/01.jpg


step02:HTMLファイルへ以下のiframeタグを書く。その時,画像のURLはstep01でメモしたもの(以下サンプルの赤字部分)にしてください。

<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.5/pannellum.htm#panorama=https://teien.hst.titech.ac.jp/photo/class-images/01.jpg&autoLoad=true&autoRotate=-2"></iframe>

※本プロジェクトでは,2年生と3年生合同の開発チームを編成できたので,生徒同士で学びあう貴重な取り組みとなりました。貴重な機会となりましたこと,この場を借りて感謝いたします。

赤字部分のサーバーは,2023年3月までの稼働となります。