＼閲覧ありがとうございます！当サイトではリンク広告を利用しています／
手軽にWebVRを実装できるフレームワークであるA-frameは、ページ埋め込みの定番であるiframeコマンドを使うことで、wordpressで作ったウェブページに埋め込みできます。この方法でページ上でVRで図示したり、歩き回ったりすることができるようになります。ここではその方法について埋め込み例を示しつつ解説します。
A-frameでつくったWebVRのページを用意します。ここでは以下のページを例に使います。
URLをコピーしましょう。
https://aframe.io/examples/showcase/helloworld/カスタムHTMLのブロックを用意して、iframeコマンドで普通のウェブページと同じように埋め込みます。幅と高さは、任意に調整できます。
コードの内容は、普通のiframeと同じで、以下のようにします。
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="600"
height="400"
src="https://aframe.io/examples/showcase/helloworld/">
</iframe>すると次のように埋め込みができました！
うえのコードの中にある、widthとheightを調整すれば、縦横のはばも思い通りです。もっとも見やすい比率で埋め込みましょう。
ぺージを表示すると、VR空間がページ上に実装できています。
マウスのドラッグで視点を上下左右に動かせます。
Wキー・・・前進
Sキー・・・後退
Aキー・・・左移動
Dキー・・・右移動
なお、矢印キーでも移動はできますが、一緒にページ自体のスクロールが始まってしまうので、実質的にはうまく使えません。
ページ右下にあるVRモードにするアイコンをクリックすると、フルスクリーンのVRが体験できます。こちらをもとに戻すには、Escキーを押せば戻ります。
メリット
・VRがページ上で閲覧できるので、手軽に体験できる。
・直接は表現しにくい３Dの世界を、そのまま表現できる。
デメリット
・強いてあげるなら、少しページが重くなるようです。
iframeをつかってA-frameを使ったWebVRページを埋め込む方法を示しました。
今後一般的に広まっていくかはわかりませんが、ウェブページ上で体験できることが増えた点については将来性のある分野だと言えるでしょう。楽しいWebVRライフを！