コーディングわずか3行!? A-FRAME × MonacaでVRアプリ作ってみた

こんにちは、中村です。
今回は、A-FRAMEとMonacaを使って、VRアプリを作ってみたいと思います。
VR体験記事はハコスコ VR(バーチャルリアリティ)で行く世界旅行の旅 3選!を御覧ください。

A-FRAME

A-FRAMEとはFirefoxを作っているMozillaが開発している、VRのオープンソースフレームワークです。
HTMLタグを記述するだけで、簡単にVRが作れちゃいます。

https://aframe.io/

Monaca

Monacaとはアシアル株式会社が提供している、スマートフォンアプリの開発環境です。

https://ja.monaca.io/

おしながき

  1. Monacaで下準備
  2. 360°画像を表示してみよう

1. Monacaで下準備

まずは、Monacaでの開発環境を整えていきたいと思います。

https://ja.monaca.io/にアクセスして、ログインしましょう。

monaca1

次に、プロジェクトを作っていきます。
新規プロジェクトを選択して、

monaca2

テンプレートは”最小限のテンプレート”を選択します。

monaca3

適当に名前をつけて、

monaca4

できました!

monaca5

次に、スマホに持ち替えて、Monaca Debuggerをインストールしましょう。
ログインすると先ほど作成したプロジェクトが表示されているかと思います。

以上でMonacaの環境が整いました。

では実際に、ソースを書いてみたいと思います。

2. 360°画像をVRで表示してみよう

さくっとVRを体験したいなら360°画像が一番!
ということで、360°画像を表示するアプリを作ってみましょう。

まずは、360°画像を撮影するところから。
360°撮影のカメラも今や3,4万で買える時代です。

THETA

https://theta360.com/ja/

いくら安くなったと言えど、買うのはちょっと、、、という方もいるかと思います。
かく言う私もその一人なので、無料で使える360°画像を探してみました。
完全フリーなものは見つけられなかったのですが、
クリエイティブ・コモンズライセンスで提供されている物があったので、
ご紹介します。

flickr

https://www.flickr.com/search/?group_id=44671723%40N00&view_all=1&license=1%2C2%2C9%2C10
※ CC 2.0ライセンスなので取り扱いに注意して下さい。

また、スマホでもGoogle ストリートビューアプリを使えば360°画像を撮影することができます。

今回はGoogle ストリートビューアプリを使って撮影した360°画像を使ってみたいと思います。

sky

近所の公園を撮影してきました。アプリ上で何枚もの写真を撮影し、それらを合成して作らているので、若干ずれている箇所もありますが、今回はお試しということで。

wwwディレクトリ配下にimageディレクトリを用意してその中にsky.jpgという名前で撮影した画像を置いてください。

そして、bodyタグの中を下記にまるっと書き換えてください。

<a-scene>
    <a-sky src="image/sky.jpg"></a-sky>
</a-scene>

最後にheadタグに下記を読み込んで下さい。

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

では、Monaca Debuggerで見てみましょう。
スマホを向けた方向の画像が見れるようになっているかと思います。

さらに画面右下のボタンをタップすると
右目用、左目用に画面が分割しますので、
もしハコスコなど、VRゴーグルを持っている方がいれば、
スマホを装着して見てみて下さい。
※ MonacaDebuggerのメニューボタンが右下にあって被って押せないので、
ドラッグしてメニューボタンを移動させてから押して下さい。

おそらくこんな感じで表示されたかと思います。

thumb_IMG_0991_1024

今回はさくっとスマホで確認するため、monacaを使いましたが、
html, jsで作れるので、アプリ化せずとも、ブラウザでも体験できます。
A-FRAMEの公式サイトをスマホのブラウザで開くと、
そこでも、A-FRAMEで作らているサンプルをご覧いただけます。
※ PCでもマウスでグリグリすれば、視点を変更できます。

いかがでしたでしょうか、
ほんの3行!ライブラリ読み込むところを入れても4行で、
VRアプリが作れちゃいました。
しかも今回はhtmlの記述のみ!

皆さんも、ぜひお試し下さい。
では、また。

Monaca x VRアプリについてのお問い合わせ

お問い合わせはこちら

コメントを残す

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