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画面にはなりましたが左右の表示が上手くできてませんでした。
でもバージョンのせいかもしれません、公式サイトでは出来ているので、うまくいく環境もあると思います。
関連記事
-
WordPressでカテゴリー名も検索にひっかけるプラグイン「Search Everything」
WordPressでカテゴリーも検索にひっかけるプラグイン「Search Everything 8.
-
HTML5 audio タグ を使って音声を出す
HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生
-
WordPress 独自テーブル
Wordpress で独自テーブルを作ってみようと思います。 独自テーブルのデータ 今回のデ
-
Blender Three.js 地球 その3(ベイクと星)
今回はベイクを試してみようと思います。 あと、参考サイトの英語の動画解説では、blenderの
-
WordPress カレンダー カスタマイズ(add_filter版)
前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで
-
Blender Three.js エクスポート その4( モーフアニメーション)
前回作った亀に歩くモーフアニメーションを付けて、それを Three.js で表示するまでをやってみよ
-
WordPress の PHP をちょっと見てみよう Ⅰ
WordPress には、たくさんのファイルが入っています。 ここではテーマ内ではなく、トップ
-
Blender Three.js エキスポート その1(3DのテキストのアニメーションやってみるⅠ)
Blender インストール 3Dを作るのに、Blender(ブレンダー)という、ソフトを使ってみ
-
画像の拡大縮小を javascript の touch イベントでやってみる
画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。
-
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ
1.移行元サイトでのデータエクスポート 「All-in-One WP Migration(公式リン