WordPress で VR させて、360°のパノラマ画像を表示する
公開日:
:
javascript, Three.js, WebGL, WordPress

WordPress.com内ショートコードで VR させる
WordPress.com内で、VR(バーチャルリアリティ)出来るようになったらしいです。
WordPress.com 公式
画像を普通に管理画面のメディアでアップしておいて、以下のようなショートコードを書くともう出来てるみたいです。
または、
[vr url=画像パス view=cinema]
360°モードとシネマモードがあるみたいです。
シネマモード?っていつ使うか想像してみたのですが、想像が追い付かなかったのでまたいつか考えることにして、今回、このブログはWordPress.com内ではなく、レンタルサーバを使ってるので、プラグインを入れてVRを試してみることにします。
WordPressで手軽に Vr を実装出来るプラグイン「WP-VR-view」
WordPressでVRを表示するのに、「WP-VR-view」プラグインを試してみます。
WP-VR-view 公式サイト
360°パノラマ画像を用意する
360°パノラマ画像は、一眼レフカメラと魚眼レンズで撮ったり、スマホの既存カメラに入ってるものもあるし、入ってなければアプリを入れれば撮れるようです。
パノラマ画像を取る専用のこのようなカメラRICOH THETAもあるみたいです。
このカメラのサイト( theta360.com )内で共有し、そのままブログ上などで、VR表示も出来るようなサービスもあるようです。
とか言いながら今回も、ダウンロードサイトからダウンロードしました。
360°パノラマ画像のダウンロードサイト
など、他にもあります。
「WP-VR-view」プラグインをインストール
「WP-VR-view」プラグインのインストールは、WP-VR-view 公式サイトからダウンロードしてもいいですし、Wordpressの管理画面からプラグイン→新規追加から「WP-VR-view」プラグインを有効にしてもいいです。

画像をアップロードする
メディアから画像や動画をアップロードして、パスをコピーしておきます。

VR の入力
投稿画面のビジュアルタブにすると二つのアイコンが出来ています。

画像の方をクリックすると、VRの入力画面が出ます。

先程メディアでコピーした画像パスと、必要なら幅・高さを入力してInsertボタンを押すと以下のようなコードが自動で挿入されます。
「WP-VR-view」のVRを表示してみる
手軽に出来ました。
次にstereo にチェックしてみましたが、パソコンだと表示がおかしいので、切り分けが必要かもしれません。
あと、自分のスマホでは2画面にはなりましたが左右の表示が上手くできてませんでした。
でもバージョンのせいかもしれません、公式サイトでは出来ているので、うまくいく環境もあると思います。
関連記事
-
-
Javascript ノードの取得や挿入
ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById
-
-
WordPress レスポンシブ テンプレート の メニューやブログの設置
前回の 「WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダ
-
-
WordPress リビジョンを削除し、テーブルを最適化してDBの容量を削減
WordPress リビジョン機能 リビジョンは過去の記事を保存してくれる WordPress の
-
-
ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」
WordPress.org の推奨環境 PHP7以上 MySQL5.6以上またはMaria
-
-
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined
Javascript で value の値を取得する このようなHTMLフォームがあった場合、
-
-
WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー
Wordpress の管理画面でフォルダーの中身を読み込む関数 opendir でエラー Word
-
-
WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)
前回(WordPress 自作フォーム 1)のつづきです。 今回は細かいところや注意点とエラーなど
-
-
Blender Three.js 地球 その1(テクスチャ)
Blender 地球 テクスチャ Blenderで地球を作ってみようと思います。 最終的にはエク
-
-
WordPress twentyseventeen の function.php を見る – その2
前回の続きです。 次のスターターコンテンツは、今回のシンプルテンプレートには不要ですが、よくわ
-
-
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる
Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c