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をクリックして該当画像を選びます。
うまくいきました
こちらのサイトにさらに詳しく書いてありましたので参考に。
https://wp-customize.net/wordpress/8393.html