na-blog

〇VR画像表示のしくみ
このブログの仕様に合わせて,下記の方法で表示確認。苦肉の策なので,まだ改良余地があるとは思うが・・・

ファイル配置
www--------blog
　　　　　|
　　　　　|--Virtual Realityフォルダー
　　　　　　　　　|
　　　　　　　　　|--vr個別表示1--index.html
　　　　　　　　　|　　
　　　　　　　　　┋　表示画像分作成　(Google VR View又はa-frame用)
　　　　　　　　　|
　　　　　　　　　|--vr個別表示n--index.html
　　　　　　　　　|
　　　　　　　　　|--vrview-gh-pages　　(Google VR Viewダウンロードファイル)
　　　　　　　　　|
　　　　　　　　　|--a-frame　　(a-frameダウンロードファイル)
　　　　　　　　　|
　　　　　　　　　|--pannellum (pannellumダウンロードファイル)
　　　　　　　　　|
　　　　　　　　　|--image (vr画像)

①Google VR View　　vr個別表示フォルダーを作成し,index.htmlを配置。ブログにiflameで埋め込み。　　　　注)"<_" スペース有り

index.html　　　8,19,22は自環境に修正。22はプレビューなので削除しても良い。

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
< head>
< META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
< META http-equiv="Content-Style-Type" content="text/css">
< title>VR< /title>
< !-- VR Viewのスクリプトを読み込み -->
< script src="https://hoge.com/vrview-gh-pages/build/vrview.min.js">
< /head>
 
< BODY>
< !-- VRコンテンツを表示するためのプレースホルダを準備 -->
< div id="vrview">< /div>
< !-- VR Viewプレイヤーを起動（インスタンス化） -->
< script>
window.addEventListener('load', onVrViewLoad);
function onVrViewLoad() {
  var vrView = new VRView.Player('#vrview', {
    image: '../image/vr画像.JPG',
                width: 600,
                height: 400,
                preview: '../image/vr画像.JPG',
                is_autopan_off:false
  });
}
< /script>
< /BODY>
< /html>

　　ブログ内iflame　　　パスを修正

< iframe width="700" height="500" src="https://hoge.com/vr個別表示フォルダー/" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">< /iframe>

②a-frame　　vr個別表示フォルダーを作成し,index.htmlを配置。ブログにiflameで埋め込み
　　index.html　　　8,14を自環境に修正

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
< head>
< META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
< META http-equiv="Content-Style-Type" content="text/css">
< title>VR< /title>
< !-- A-FRAMEのスクリプトを読み込み -->
< script src="https://hoge.com/a-frame/aframe.min.js">
< /head>
 
< BODY>
< !-- MozillaのA-Frame -->
< a-scene>
    < a-sky src="https://hoge.com/image/vr画像.JPG">
< /a-scene>
< /BODY>
< /html>

　　ブログ内iflame　　　パスを修正

< iframe width="600" height="400" src="https://hoge.com/vr個別表示フォルダー/" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">< /iframe>

③Pannellum　　ブログに直接iflameで埋め込み　　　パスを修正

< iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://hoge.com/pannellum/pannellum.htm#panorama=https://hoge.com/image/vr画像.JPG&autoLoad=true&autoRotate=-2">< /iframe>

①Google VR Viewと②a-frameは,htmlファイルを作成する余計な手順が必要なので,使用頻度は少ないと思う。③Pannellumは今のところベスト!