360度画像の公開

Last-modified: 2019-09-07 (土) 23:20:56

360度画像の公開方法

FlowScapeに限らず、360度画像を公開するには、kuulraのようなオンラインサービスを使う方法と、HTMLで埋め込みタグを使う方法があります(kuula使用例)。
js禁止のブログなどに埋め込む場合はオンラインサービスへの申し込みが必要ですが、ヘッダ設定OKのブログや自前のホームページを持っている場合は、ヘッダ部分に<script src="https://aframe.io/releases/0.2.0/aframe.js"></script>の一行を足し、ボディ部分に<a-sky src="360度画像のアドレス"></a-sky>を足すだけで簡単に360度画像を公開する事ができます。

A-framを使う

ホームページ用のスペースを持っている人は、サンプルとして、以下のコードを入力したHTMLをアップしてみて下さい(画像アドレスは適宜変更して下さい)。

<html>
<head>
<script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
<head>
<body>
 <a-scene>
     <a-sky src="360度画像のアドレス"></a-sky>
 </a-scene>
<body>
</html>

A-frame公式サイト(英語)では、上記以外の便利なタグが多数紹介されています。

kuulraを使う

https://kuula.co/feed」にアクセスして、とりあえず登録します。
kuku1.png
無料版を選び、メールボックスを確認して認証を終えます。
kuku2.png
アップロードを選び、360度画像を選びます。
kuku3.png
黒丸にパノラマ画像をドラッグし、右メニューで各種の調整を行います。
kuku4.png
調整後、登録しようと思ったらPOST ITボタンを押します。キャンセルする場合はCloseを選び、キャンセルして良いかのダイアログにOKを出します。
kuku5.png
右上メニューのShereからシェア方法を選びます。
ブログ等に埋め込む目的の場合はExportを選びます。
kuku6.png
画像の下に埋め込みタグが表示されるので、コピーして貼りたい場所に貼って下さい。
kuku7.png