, , ,

Second Lifeの「360度スナップショット」をウェブサイトに載せよう（Pannellumの導入方法）

360度スナップショットは、2016年に開発版が発表されて、2021年の年末に公式ビューワ、2022年の3月22日にfirestorm 6.5.3で使えるようになりました。

目次

360度スナップショットとは？

Second Lifeで「上下左右全ての景色・空間」を撮影することができる機能です。 専用の環境があれば、擬似的な３D空間のような写真になります。 これは「エクイレクタングラー形式（equirectangular）」と呼ばれるVRでも利用される図法で作成されます。 日本語で「正距円筒図法」といいます。そうですね、これは世界地図で球体の地球を平面で見るときに使う図法のひとつなのです。

特別なファイル形式ではなく、1枚の画像に全方向の情報を写すという形ですね。 最近では、360度写真も取れるカメラも販売されているため、今後利用する機会が多くなるでしょう。

世界地図を360度スナップショットと同じ方法で表示してみました。

必要な準備と基礎知識

基本的なウェブサイト作成の知識が必要となります。

  • 画像ファイルのアップロードの知識
  • HTML、CSSの基本的な知識
  • Javascriptの基礎知識
  • Flickrのアカウント（利用する場合）

360度画像をPannellumをつかってウェブサイトへ埋め込む

基本的には、Flickrなどのサービスをつかう方法が多いかと思いますが、画像によってはウェブサイト上のみで動く必要もあります。 それを実現させるにはPannellumを使いましょう。これはWebGLとJavaScriptで動いています。 細かな調整ができますし、対応環境が多いです。（iOS、Androidなど）

今回は複雑な画像URLだったため、直接スクリプトを記述と、スクリプト自体をこのサイトと同じ場所にアップロードしています。またiframeをつかって1行程度で埋め込むことも可能ですし、CDNをつかってスクリプトをアップロードしなくても使うことが可能です。WordPressの場合はプラグインもあります。

Pannellumの使い方（iframe版）

複雑なことは必要ない場合に向いています。 文字数も減りますので、管理も簡単です。

CORSをサポートするサイト( Imgurなど)に画像をアップロードします。 通常のレンタルサーバーでは.htaccessをつかうことで、可能になります。 画像を保存するフォルダに以下の.htaccessを作成して、画像をPannellumから読み込めるようにします。 

Header set Access-Control-Allow-Origin: "https://cdn.pannellum.org"

ここから（https://pannellum.org/documentation/overview/tutorial/）コードを作成し、ウェブサイトにコードを記述します。

Pannellumの使い方（JavaScriptを直接記入の場合）

JavaScriptで直接記述すると、Pannellumのすべての機能を使うことができます。 ただし文字数が多くなってしまうなどのデメリットもあります。

pannellum.cssとpannellum.jsを公式サイトからダウンロードしてアップロードをしておきます。

headerの中、またはページの上部にpannellum.cssとpannellum.jsを読み込みます。 

<link rel="stylesheet" href="（あなたのサーバー）/pannellum.css"/>
<script type="text/javascript" src="http://（あなたのサーバー）/pannellum.js"></script>

つぎにスクリプト本体を記入します。 

<script>
pannellum.viewer('panorama', {
    "autoLoad": true,
    "autoRotate": "2",
    "type": "equirectangular",
    "panorama": "http://（あなたのサーバー）/amh2.jpg"
});
</script>

Flickrの360度画像をSNSやウェブサイトに載せる

Flickrはとても簡単です。Second Lifeの住民なら誰でも使ってる写真共有サイトです。 画像を上げれば、Exif情報からエクイレクタングラー形式と読み取って、自動でパノラマ表示をしてくれます。 ブログなどに乗せる場合は、画像右下のSNSシェアボタンを押すと、小窓がでるのでタブをいじって「Embed」でHTMLタグを表示してくれます。

アップロードした画像がパノラマ表示にならないときは、「equirectangular」タグをいれてみると表示します。 sl360_Bloodlines_South_4096x2048_2048_20220404_143730

パノラマ画像をBlenderで作る3Dオブジェクトに使う

写真・動画の撮影の質問集（FAQ）

基本

応用

写真加工