Tweet

Pocket

簡単すぎて短いですが。グラフィックライブラリのA-Frameを活用した超シンプルなパノラマ画像ビューワーです。
面倒ならGithubにアップロードしてあるソースコードをまんま持っていって貰えばそれはそれで動きます。

やってみよう

成果物イメージ。こんな表示ができるものを作ります。［panorama360］って書くだけでこうなります。

WORDPRESSプラグインに登録する

この記事に手順が載っています。

【CG】FBX形式の3Dデータを簡単にビューイング出来るWORDPRESSプラグインを作ろう【Three.js】

編集画面で記載するおまじない

WORDPRESSの投稿画面で以下のような文字列を書けばOK。

［panorama360 url=”https://christinayan01.jp/architecture/image/IMG_20171028_111542_017.jpg” height=”50vh”］

panorama360：（必須）おまじないです。
url：（必須）パノラマ画像のURLをフルパスで書いてください。
width：（任意）幅。CSSに記述する場合の単位まで書いてください。
　　　　　　　　記述しない場合＝100%
　　　　　　　　記述例：400px、80%、80vw、5.0em、…
height：（任意）高さ。CSSに記述する場合の単位まで書いてください。
　　　　　　　　記述しない場合＝400px
　　　　　　　　記述例：500px、20%、40vh、6.0em、…

記事の表示

ソースコード

Githubに公開しています。
添えているサンプル画像もお好きにご利用ください。
　　https://github.com/christinayan01/demo/tree/master/yanai-panorama-360-viewer