Pannellumを使って、iframeで360度画像をブログに取り込む
A simple exampleを改造
panorama.htmlとして保存、cssとjsあと画像も同一ホルダに保存してアップロードすると見える。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A simple example</title> <link rel="stylesheet" href="pannellum.css"/> <script type="text/javascript" src="pannellum.js"></script> <style> #panorama { width: 600px; height: 400px; } </style> </head> <body> <div id="panorama"></div> <script> pannellum.viewer('panorama', { "type": "equirectangular", "panorama": "alma.jpg" }); </script> </body> </html>
iframeを呼び出す側
同一フォルダにdemo.htmlとして保存する。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <link rel="shortcut icon" href=""> </head> <body> <iframe width="600" height="400" allowfullscreen style="border-style:none;" src="pannellum.html?panorama=alma.jpg"></iframe> </body> </html>
「src="pannellum.html?panorama=alma.jpg">」のpanoramaはデータを渡している訳ではないらしい。panorama.htmlの「"panorama": "alma.jpg"」が本物ぽい。
つまり、これだけで良さそう。
<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="pannellum.html"></iframe>
オプション指定
jsonで出来るらしいけど、panorama.htmlに埋め込んだほうが楽だった
自動でロード、勝手に回転
(省略) <div id="panorama"></div> <script> pannellum.viewer('panorama', { "type": "equirectangular", "panorama": "alma.jpg", "autoLoad": true, "autoRotate": -2, "title": "新宿ダンジョン" }); </script>
<おまけ>
WebGLが動作するブラウザが条件だったので、互換表示が推奨されているような環境ではダメだったのだ。。。