360度画像をホームページで公開する方法(埋め込み可)

「360°パノラマ画像をホームページで公開する方法」を解説します。

サンプル

単一ページで360度写真を公開する場合のサンプルはこちら

サンプルを開く

ホームページに埋め込んで公開する場合のサンプルはこちら

そもそも360度写真とは?

RICOH THETAなどで撮影した360度画像は「エクイレクタングラー」と呼ばれる特殊な画像です。
VRは、地球儀のように3Dの世界ですが、それを無理矢理2Dに引き伸ばしたものが、エクイレクタングラーです。

エクイレクタングラーの例)
エクイレクタングラー

これをホームページ上で360度VR画像として公開するには、2Dを3Dに変換して描写する、という特殊なことをやる必要があります。

360度写真をWEBで公開する方法は2パターン

360度パノラマ画像をホームページで公開するには、以下の2通りが考えられます。

・360度パノラマビューアー(外部サービス)を利用する
・自社開発する

360度パノラマビューアー(外部サービス)を利用する

アップロードするだけで360度VRページが出来上がるような、外部サービスを利用する方法です。

弊社の提供している「PanoMixer360」では、
単に360度画像の公開だけでなく、Googleストリートビューのように360度画像の中を歩き回るような
「バーチャルツアー」を簡単に作成することができます。

こちらのサンプルも、この「PanoMixer360」で制作したVRバーチャルツアーです。

自社開発する

もう1つの公開パターンは自社開発する方法です。

three.jsというjavascriptライブラリを使って公開する方法が一般的です。

前提として、上級者向けのjavascript知識が必要となります。
また、カメラポジションや光源の設定など、様々なVR知識も必須です。

さらに用途によっては、前述のようにエクイレクタングラーの2D世界を3Dに変換するための数学知識や、
サーバー環境によってCORS問題の知識なども必要になるため、自作のハードルはかなり高いと言えます。

挑戦したい方はthree.jsの入門から始めてみると良いでしょう。