360度パノラマ画像の埋め込み

私の作成したツールを利用して,お使いの Web サイトやブログで公開する方法です.
自由にお使いいただいて構いません.


背景画像を用意します.
私は「Cardboard カメラ」で撮影した画像を利用しています.

動作確認のみならば,パノラマ画像でなくても可能です.

回転する背景 アップロード先 up_bg_s
静止した背景 アップロード先 up_bg

背景画像をアップロード
「参照」ボタンを押して,画像を選択します.jpg または png が指定可能です.
そのままのサイズでも可能ですが,必要に応じてリサイズ指定します.
PC なら「5000」以下,スマートフォンなら「1000」が良いみたいです.
「upload」でサーバに送ります.
暫くすると,WebGL での表示に切り替わります.
“(画像ファイル名).zip” にリサイズ後の画像と表示のためのデータが入ります.
これをダウンロードして,Web サーバなどに置きます.
zip を解凍すると 2 つの html があります.
PC 版 Firefox ではそれらの html を開くことが可能です.
~.scenejs.html は回転するタイプです.
~.threejs.html は静止したタイプです.
html のファイル名は自由に変更して構いません.


お使いの Web サーバなどへアップロードしてください.
次の様に iframe を使用して,アップロードしたファイルを参照します.
<iframe src=’https://itl.mydns.jp/i_Tools/Doc/blog/up_bg_s/IMG_20180428.scenejs.html’> </iframe>


私のサーバに画像ファイルを送りたくない場合は,仮の画像を用意してください.
仮の画像を本来の画像名に変更してアップロードします.
zip をダウンロードして本来の画像と差し替えます.
画像は,横と縦の比率が 2:1 になっている必要があります.

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

にほんブログ村 IT技術ブログへ   

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください