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を表示してみる


手軽に出来ました。

次にstereo にチェックしてみましたが、パソコンだと表示がおかしいので、切り分けが必要かもしれません。
あと、自分のスマホでは2画面にはなりましたが左右の表示が上手くできてませんでした。

でもバージョンのせいかもしれません、公式サイトでは出来ているので、うまくいく環境もあると思います。

関連記事

WordPress レスポンシブ テンプレート 元にサイトを作ってみる その1

「レスポンシブ テンプレート の メニューやブログの設置」の記事では、メニューやブログの設置例をやっ

記事を読む

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

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

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

記事を読む

WordPress レスポンシブ テンプレート

WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

記事を読む

WordPress Twenty Seventeen function.php

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

前回の続きです。 次のスターターコンテンツは、今回のシンプルテンプレートには不要ですが、よくわ

記事を読む

Wordpress 自作フォーム

WordPress 自作フォーム その1(サンプルと設置)

Wordpress でプラグインを使わずにフォームをやってみます。 簡単に名前、メールアドレス、メ

記事を読む

WordPress プラグイン「 Search Everything 」

WordPressでカテゴリー名も検索にひっかけるプラグイン「Search Everything」

WordPressでカテゴリーも検索にひっかけるプラグイン「Search Everything 8.

記事を読む

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

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

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

記事を読む

WordPress レスポンシブ テンプレート 元にサイトを作ってみる その2

DEMO を見る カスタム投稿タイプ functions.php 今回は3つのリストメニュ

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

Blender Three.js 海 物理演算

Blender Three.js エクスポート その5(目のボーンとウェイトペイントとか)

前回亀の歩くアニメーションが、手足のボーンしか動かしてないのに、目や甲羅の部分まで連動してしまったの

記事を読む

javascript Three.js WebGL WordPress

Message

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

CodeIgniter インストール
Codeigniter インストールとバージョンアップ2→3 PHP 5→7 メモ

Codeigniter インストール Codeigniter をサイ

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

wordpress カスタム投稿で 2ページ目以降が404
wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました

ロリポップでWordPressのPHPバージョンを5から7にする
ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」

WordPress.org の推奨環境 PHP7以上 MyS

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

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

→もっと見る

    • 201910
      Mon Tue Wed Thu Fri Sat Sun
      123456
      78910111213
      14151617181920
      21222324252627
      28293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑