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になったりして、将来が楽しみです。

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

おすすめ記事

  • 実家を離れて半年  久しぶりに実家に帰ったらトイプードルがいた実家を離れて半年 久しぶりに実家に帰ったらトイプードルがいた 就職先が関東の企業だったため、生まれてから大学院を卒業するまでずっと住んでいた関西の実家を出ることになりました。 少し寂しい気持ちもありましたが、今までずっと実家にいたので、引っ越すならどこか遠くに行きたい!と思っていたくらい。どっちかというと新しい生活にわくわくしながら […]
  • 革新的なアイデアを生み出すための重要ポイントをまとめてみた!革新的なアイデアを生み出すための重要ポイントをまとめてみた! 私がこの記事を書こうと思ったきっかけは、以下の本を読んで、日本人はイノベーションを起こすことが苦手ではなく、日本社会にありがちな組織がイノベーションを生み出すことを邪魔している!ということが書かれていたからです。なんてもったいないことでしょうか!! アメリカや中国では、イ […]
  • 横浜水天宮に安産祈願に行ってきました!~hanaのマタニティブログ~横浜水天宮に安産祈願に行ってきました!~hanaのマタニティブログ~ はじめまして、hanaといいます。 今日からブログ始めました。気ままにマタニティライフや趣味のことを綴っていけたらと思いますので、 ごゆるりと、お付き合いください:)   妊娠が発覚してからちょうど3か月が経ち、無事に安定期に入りました。 […]
  • 超簡単!A-Frameアニメーションの書き方まとめ超簡単!A-Frameアニメーションの書き方まとめ 今回は、VRコンテンツをHTML風に簡単に書けるA-Frameを使って、WordPress記事内に作成した3Dコンテンツにアニメーションをつけてみようと思います!どれも簡単に書けるので試してみると面白いとおもいます! ちなみに、A-Frameでアニメーションを記述する際 […]
  • 川崎のおすすめB級グルメ!味噌ダレで食べるかわさき餃子!川崎のおすすめB級グルメ!味噌ダレで食べるかわさき餃子! 川崎に3年以上住んでいますが、川崎特有のB級グルメってあまり何もイメージ沸かないと思います。そんな中、私が唯一発見したのが、この「かわさき餃子みそ」で食べる餃子です! 川崎で味噌ダレで食べる餃子を初体験!! 私が味噌ダレで食べる餃子に始めて出会ったのがこのお店!!川崎駅から […]
  • 最新人気マンガをお得に読むならebookjapan + Yahoo!プレミアム会員が最強!最新人気マンガをお得に読むならebookjapan + Yahoo!プレミアム会員が最強! 小学生の頃から結構なマンガ好きで、社会人になった今でも毎日のようにスマホでマンガを読んでいます。 私が子供の頃は、父親に古本屋に連れて行ってもらって、かなり安くマンガを買うことが多かったですが、現在は収納スペースや妻の目を気にした結果、電子書籍がメインになりつつあります […]

コメントを残す

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

CAPTCHA