360度画像をホームページに埋め込む

360度画像はそのままアップロードしたのではこのようになってしまいます。

360度を動かして見られるようにするには、専用のソースコードが必要です。

jsを使用したHTMLソースで360度画像をホームページに埋め込む

<script src=”https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.1.0/build/immersive-custom-elements.js”></script>

<img-360 src=”https://in-ranch.com/360/nico.JPG” width=”700″ height=”550″></img-360>

この記述で試したところ、なんと写真が反転してしまいました。
文字が反転しているのがわかりますか?

js配布サービスを利用する

次にjsソースの配布サービスを利用してみました。

https://www.aizulab.com/blog/javascript-library-immersive-custom-elements/

反転は解消されましたが、全面表示になってしまいました!

プラグイン「WP VR」をインストール

https://hyakuyattsu.com/create/360-wordpress-2019

まず360度画像をライブラリにアップします。

タイトルを入力して、画像なので「SCENES」を選択。
UPLOADをクリックして該当画像を選びます。

うまくいきました