360°画像をサイト内に埋め込む【まとめ】

2017年05月10日(水) 2,644 vi

360°画像をサイト内に埋め込む【まとめ】

RICHO THETAなどの360°画像をwebサイトに埋め込むにあれやこれやを試したことのまとめメモ。
wordpressだとプラグインで無料でわりと簡単にできました。


Google VR View
jsを使って埋め込み。ホットスポットの設定などいろいろな設定が可能。
PCでChoromeの場合、画像サイズが2のべき乗(2,048や4,096など)でないと表示がおかしくなる模様。
モノラル画像はアスペクト比2:1を推奨(4,096 × 2,048など)
ステレオ画像はアスペクト比を1:1を推奨(4,096 × 4,096)
公式はこちら>
A FRAME jsをつかって簡単に埋め込みことができるが、別タブ、別ウィンドウでの表示しかなかった。ifameなどで同ページ内に埋め込むこともできなくない…その場合、拡大表示などがうまく調整できなかった。
公式はこちら>
パノラマ工房 360度写真のクラウドサービス。画像をアップすると、埋め込みコードができて、それを使用することができる。無料アカウントでは最大30枚まで利用可能。それ以上は有料みたい。
公式はこちら>
Round me 海外の360度写真のクラウドサービス。画像をアップすると、埋め込みコードができて、それを使用することができる。無料アカウントでは枚数制限あり!制限以上は有料みたい。
公式はこちら>
wpプラグイン「WP-VR-view」 wordpressで利用可能なプラグイン。無料で利用可能
Google VR ViewのJSを活用したプラグイン。
Google VR View同様、PCでChoromeの場合、画像サイズが2のべき乗(2,048や4,096など)でないと表示がおかしくなる模様。
モノラル画像はアスペクト比2:1を推奨(4,096 × 2,048など)
ステレオ画像はアスペクト比を1:1を推奨(4,096 × 4,096)
wpプラグイン「Cardboard」 wordpressで利用可能なプラグイン。無料で利用可能
wpプラグイン「WP Photo Sphere」 wordpressで利用可能なプラグイン。無料で利用可能
スマホなどで、VRゴーグルへのモードがなかった。

360°画像をサイト内に埋め込む【まとめ】 2,644 vi  記事:yukimaru

VRの最新記事