A-frameをiframeでページに埋め込む方法！－wordpressでVR！

手軽にWebVRを実装できるフレームワークであるA-frameは、ページ埋め込みの定番であるiframeコマンドを使うことで、wordpressで作ったウェブページに埋め込みできます。この方法でページ上でVRで図示したり、歩き回ったりすることができるようになります。ここではその方法について埋め込み例を示しつつ解説します。

AframeをWordPressで楽しむ方法
メリットとデメリット
まとめ
おすすめ

AframeをWordPressで楽しむ方法

まずはWebVRページを用意する

A-frameでつくったWebVRのページを用意します。ここでは以下のページを例に使います。

URLをコピーしましょう。

https://aframe.io/examples/showcase/helloworld/

カスタムHTML内にiframeコマンドで貼り付ける

カスタムHTMLのブロックを用意して、iframeコマンドで普通のウェブページと同じように埋め込みます。幅と高さは、任意に調整できます。

コードの内容は、普通のiframeと同じで、以下のようにします。

<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="600"
    height="400"
    src="https://aframe.io/examples/showcase/helloworld/">
</iframe>

すると次のように埋め込みができました！

うえのコードの中にある、widthとheightを調整すれば、縦横のはばも思い通りです。もっとも見やすい比率で埋め込みましょう。

完成・・・マウス、WASDキーで移動してみる

ぺージを表示すると、VR空間がページ上に実装できています。

マウスのドラッグで視点を上下左右に動かせます。

Wキー・・・前進

Sキー・・・後退

Aキー・・・左移動

Dキー・・・右移動

なお、矢印キーでも移動はできますが、一緒にページ自体のスクロールが始まってしまうので、実質的にはうまく使えません。

VRモードも可能！

ページ右下にあるVRモードにするアイコンをクリックすると、フルスクリーンのVRが体験できます。こちらをもとに戻すには、Escキーを押せば戻ります。

メリットとデメリット

メリット
・VRがページ上で閲覧できるので、手軽に体験できる。
・直接は表現しにくい３Dの世界を、そのまま表現できる。

デメリット
・強いてあげるなら、少しページが重くなるようです。

まとめ

iframeをつかってA-frameを使ったWebVRページを埋め込む方法を示しました。
今後一般的に広まっていくかはわかりませんが、ウェブページ上で体験できることが増えた点については将来性のある分野だと言えるでしょう。楽しいWebVRライフを！