WordPress記事内にA-Frameを使ってVRコンテンツを作ってみる

更新日: 2020-05-01

VRに興味があったので、VRコンテンツをHTMLで記述できるA-Frameを使ってみました。A-Frameを使えばとても簡単に3DのVRコンテンツをページに表示することができヘッドマウントディスプレイを使えば、3D空間の中に入ったかのように空間内を見渡すことができます。

今回は、A-Frame公式ドキュメントに記載されているサンプルを少しいじってWordPressの記事内で動かしてみたいと思います。

Head内でscript読み込み

A-Frameを表示するためには、HTMLのhead部分で以下のjsファイルを読み込む必要があります。<version>部分は適当に置き換えてください。この記事執筆時点の最新バージョンは0.8.2でした。

<script src="https://aframe.io/releases/<version>/aframe.min.js"></script>

head内に上記のコードを書くには、WordPressのプラグインを使うなり、テーマを直接編集するなり方法はいくつかあると思いますが、私は Custom CSS & JSというプラグインを使ってHead内に書き込みました。

また、公式ドキュメント上はHead内に記載するようになっていますが、body部分に書き込んでも一応動きます。WordPressでHead内に記載する場合、すべての投稿に反映されてしまう場合が多いので、特定の投稿だけで読み込ませたいならbody部分に書いた方がいいと思います。

記事内に3Dコンテンツを追加

WordPressの記事内にA-Frameで描写したコンテンツを表示するためには、すべてテキストモードで編集します。

テキストモードで以下のようなコードを書きます。こちらのコードは、A-Frameドキュメントの一番最初に記載されてるサンプルコードをもとに作成したものです。

<a-scene class="inpost" embedded>
  <a-sphere position="0 1 -5" color="#EF2D5E"></a-sphere>
  <a-sphere position="0 1 5" color="#696969"></a-sphere>
  <a-sphere position="5 1 0" color="#1e90ff"></a-sphere>
  <a-sphere position="-5 1 0" color="#ff7f50"></a-sphere>
  <a-sphere position="0 5 0" color="#008000"></a-sphere>
  <a-plane position="0 -1 0" rotation="-90 45 0" width="12" height="12" color="#7cfc00"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

このコードを加えてページを表示すると、以下のようにページ内に3Dコンテンツが登場します!!すごい簡単です!表示するためには、ブラウザがWebVRをサポートしている必要がありますので、ブラウザによっては表示できない場合があります。サポート状況はこちらのサイトからチェックできます。

コードの簡単な説明

ます初めに<a-scene>を追加し、この内部に描写したい3Dオブジェクトを記述していきます。

<a-scene class="inpost" embedded>
...
</a-scene>

class=”inpost”は、3Dコンテンツの描写範囲を指定するために私が定義したもので、以下のようにCSSとして追加しています。これで好きな大きさで描写範囲を指定できます。

a-scene.inpost {
  height: 400px;
  width: 100%;
}

また、embeddedは、特定のページにコンテンツを埋め込みたい場合に指定するもので、指定しないとページ全体にコンテンツが広がってしまいます。

球体や平面などのオブジェクトも<a-****>という名前のタグで指定していきます。名前を見ればだいたい分かると思いますが、<a-sphere>は球体、<a-plane>は平面で、<a-sky>は背景を表しています。positionで表示位置を決定し、rotationで角度、width, heightなどで大きさを指定します。

作成した3Dコンテンツ

作成した3Dコンテンツは以下のような感じで見ることが出来ます。

今回描写しているのは、5色の球体(前後、左右、真上)と地面をイメージした平面です。マウスを使って回転させると5種類の球体が確認できると思います。また、スマホのブラウザ(私が試したのはAndroidのChrome)で見ている場合は、スマホの向きをカメラ撮影するかのように変えていくと画面が動きます!すごいです!

オブジェクトのレイアウトは、以下のような感じになっています。ちょうど5個の球体で囲まれた中心の位置に立っているように見えると思います。この画像は、A-Frame Inspectorを使って見たもので、3Dシーンを見ているときに、Ctrl + Alt + i を押すと誰でも見ることができます。

個人的には光源の位置が固定されているように描写されるのが面白いです!この光源の位置も変更可能なはずなので、後々試していきたいです。

まとめ

今回はWordPressの記事内にA-Frameを使って3Dコンテンツを作ってみました!もともとWebフロント系のエンジニアではないので、分からないことが多く、本当にこれで良いのか?と思う部分もありますが、比較的簡単に動くところまで持っていくことができました!

初めはA-Frameではなく、Three.jsを使ってみようと思ったのですが、A-Frameの方がHTMLで簡単に書けるのが面白いです。より複雑な処理、動作を定義しようと思うとJavascriptで書いたほうが柔軟だと思うので、直接Three.jsのライブラリを利用することになるのでしょうか。

まだまだ今回やった以外にもいろいろなサンプルコードがA-Frameの公式ページに載っています。アニメーションを付けたり、クリックでオブジェクトを回転させたりいろいろできそうです!

WordPressでも今後、3Dコンテンツを簡単に貼り付けられるようにするプラグインも出てきそうですね!今は私の探す限り360度画像を利用するプラグインがある程度ですが、今後誰かが便利なプラグインを作るでしょう!笑 そうなれば、ブログで何かを紹介するときも今までとは違った紹介方法ができてとても面白そうですね!これからは企業のホームページなんかも3Dになったりして、将来が楽しみです。

みなさんも興味がある方はやってみてください!

おすすめ記事

  • モルディブでシュノーケリングするなら持っていきたい必須&おすすめグッズ!モルディブでシュノーケリングするなら持っていきたい必須&おすすめグッズ! モルディブでシュノーケリングを楽しむなら、ぜひ持っていきたいグッズを紹介します! 私の父は、若い頃から沖縄で素潜りしていた猛者で、10m以上をフィンなしで潜ります。笑 私は、そんな父に連れられて子供の頃から素潜りをしてきたので、シュノーケリングについては結構経験豊富 […]
  • 資産性重視!損しないマンション購入のために利用したい「住まいサーフィン」資産性重視!損しないマンション購入のために利用したい「住まいサーフィン」 マンション購入を考えている方は少なからず購入時から売却を意識しているはずです。 住宅ローンを組んでマンションを購入する場合は、売却時のローン残高を完済できなければ売却することはできません。 最悪の場合、突然の転勤が決まったときに 引っ越したくても引っ越せない […]
  • 横浜水天宮に安産祈願に行ってきました!~hanaのマタニティブログ~横浜水天宮に安産祈願に行ってきました!~hanaのマタニティブログ~ はじめまして、hanaといいます。 今日からブログ始めました。気ままにマタニティライフや趣味のことを綴っていけたらと思いますので、 ごゆるりと、お付き合いください:)   妊娠が発覚してからちょうど3か月が経ち、無事に安定期に入りました。 […]
  • まりんちゃんと軽井沢デビュー!まりんちゃんと軽井沢デビュー! 初めての軽井沢旅行。関西から車で愛犬まりんちゃんも一緒に行ってきました。旅行はペットホテルでお留守番のことが多いのですがペットと泊まれるホテルが取れたので連れて行くことが出来ました!今回泊まったホテルはこちらの投稿に書いたホテルハーヴェスト旧軽井沢! まりんちゃんも一緒に […]
  • 最新人気マンガをお得に読むならebookjapan + Yahoo!プレミアム会員が最強!最新人気マンガをお得に読むならebookjapan + Yahoo!プレミアム会員が最強! 小学生の頃から結構なマンガ好きで、社会人になった今でも毎日のようにスマホでマンガを読んでいます。 私が子供の頃は、父親に古本屋に連れて行ってもらって、かなり安くマンガを買うことが多かったですが、現在は収納スペースや妻の目を気にした結果、電子書籍がメインになりつつあります […]
  • 四国縦断旅行 足摺岬へ!四国縦断旅行 足摺岬へ! 2017年の夏休みに四国最南端、足摺岬まで行ってきました!非常に盛沢山な二泊三日の旅行になりました!四国は壮大な自然がとても癒しになります。見どころもとても多いのでとてもおすすめです! 足摺岬までの道のり 松山空港まで飛行機で行き、そこからはレンタカーです。 足摺岬は、松 […]

コメントを残す

メールアドレスが公開されることはありません。