WordPress で VR させて、360°のパノラマ画像を表示する

公開日: : javascript, Three.js, WebGL, WordPress

Wordpress VR Test

WordPress.com内ショートコードで VR させる

WordPress.com内で、VR(バーチャルリアリティ)出来るようになったらしいです。

WordPress.com 公式
画像を普通に管理画面のメディアでアップしておいて、以下のようなショートコードを書くともう出来てるみたいです。

[vr url=画像パス view=360]
または、
[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」プラグインを有効にしてもいいです。
WP-VR-viewの使い方1

画像をアップロードする

メディアから画像や動画をアップロードして、パスをコピーしておきます。
WP-VR-viewの使い方2

VR の入力

投稿画面のビジュアルタブにすると二つのアイコンが出来ています。
WP-VR-viewの使い方3
画像の方をクリックすると、VRの入力画面が出ます。
WP-VR-viewの使い方4
先程メディアでコピーした画像パスと、必要なら幅・高さを入力してInsertボタンを押すと以下のようなコードが自動で挿入されます。

[vrview img=”画像パス” width=”幅” height=”高さ”]

「WP-VR-view」のVRを表示してみる

[vrview img=”http://ara-web.net/blog/wp-content/uploads/2017/03/Alexs_Apt_2m.jpg” width=”550″ ]
手軽に出来ました。

次にstereo にチェックしてみましたが、パソコンだと表示がおかしいので、切り分けが必要かもしれません。
あと、自分のスマホでは2画面にはなりましたが左右の表示が上手くできてませんでした。
[vrview img=”http://ara-web.net/blog/wp-content/uploads/2017/03/Alexs_Apt_2m.jpg” stereo=”true” width=”550″ ]
でもバージョンのせいかもしれません、公式サイトでは出来ているので、うまくいく環境もあると思います。

関連記事

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

WordPress Warning エラー

WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー

Wordpress の管理画面でフォルダーの中身を読み込む関数 opendir でエラー Word

記事を読む

Blender と Three.js で3Dのテキストのアニメーションやってみる

Blender Three.js エキスポート その1(3DのテキストのアニメーションやってみるⅠ)

Blender インストール 3Dを作るのに、Blender(ブレンダー)という、ソフトを使ってみ

記事を読む

blender 球 テクスチャ

Blender Three.js 地球 その1(テクスチャ)

Blender 地球 テクスチャ Blenderで地球を作ってみようと思います。 最終的にはエク

記事を読む

Wordpress 自作フォーム (チェックボックスなど)

WordPress 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpress で自作フォームを作ってみ

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById

記事を読む

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細かいところや注意点とエラーなど

記事を読む

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5 audio タグ を使って音声を出す

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生

記事を読む

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か

記事を読む

javascript Three.js WebGL WordPress

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

canvas タグでお絵描き(レスポンシブ)
canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)
フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

→もっと見る

    • 201906
      Mon Tue Wed Thu Fri Sat Sun
      12
      3456789
      10111213141516
      17181920212223
      24252627282930
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑