---
title: A-FrameでWebVR
tags:  #aframe #webvr  
author: [だら](https://convert.docswell.com/user/dala00)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5GE8RV4JDR.jpg?width=480
description: A-FrameでWebVR  大阪】XRミーティング 2019/07/17【AR/CR/MR/SR/VR】 https://osaka-driven-dev.connpass.com/event/136211/ にて
published: March 08, 21
canonical: https://convert.docswell.com/s/dala00/NKWXJ5-2021-03-09-083528
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5GE8RV4JDR.jpg)

A-FrameでWebVR

# Page. 2

![Page Image](https://bcdn.docswell.com/page/MLELK5VJR1.jpg)

自己紹介 Twitter: dala00 個人で色々とサービスを作ってつぶやいたりしています

# Page. 3

![Page Image](https://bcdn.docswell.com/page/54JM23NJW1.jpg)

Oculus Quest買いました！ ● ● VR空間の居心地が想像以上に良かった 多分実際に使ってみないと想像できない

# Page. 4

![Page Image](https://bcdn.docswell.com/page/ZPJRMQ4E9L.jpg)

VR用のアプリもなにか作ってみたい しかし…… → Oculus Questのアプリをストアに出すための審査がすごく厳しいらしい…… → 今のところ個人で出すのは厳しそう……？ 無料の軽いアプリとかなおさら…… → 悲しい

# Page. 5

![Page Image](https://bcdn.docswell.com/page/NPEXV5Z7XY.jpg)

ブラウザのホーム画面に色々リンクが。

# Page. 6

![Page Image](https://bcdn.docswell.com/page/63EKQ6VEDY.jpg)

ブラウザでもVR!? ● ● ● ● ● 普通にVRできる 物を召喚したり 掴んだり 投げたり ワープで移動したり

# Page. 7

![Page Image](https://bcdn.docswell.com/page/4L73P8QE5P.jpg)

どうやってるの！？ A-FrameというMozilla製のOSSフレームワークを使っているっぽい WebVRという技術を用いているっぽい WebVR（ウェブブイアール）とは、ウェブブラウザ上でVRデバイスの位置，向き，加速度 などの情報を取得するために用いられるJavaScriptのアプリケーションプログラミングインタ フェース（API）のことである。(Wikipediaより)

# Page. 8

![Page Image](https://bcdn.docswell.com/page/V87DLMWEGD.jpg)

WebVRで調べたら他にも色々サンプルが

# Page. 9

![Page Image](https://bcdn.docswell.com/page/4VJP2RXJ86.jpg)

WebVRすごく良いのでは？ ● ● ● ● ブラウザなので適当に作ったものをインストール不要で誰にでも簡単に使ってもらえ る A-FrameならHTMLだけでもとりあえず空間作れる JavaScriptも使えばゲームとかも作れる 普通にStripeとかで決済を導入すればVRアプリでマネタイズも簡単かも？

# Page. 10

![Page Image](https://bcdn.docswell.com/page/L2EVDR3EQW.jpg)

WebVRできるライブラリ ● ● MozillaのA-Frame とにかく今よく使われてるっぽい React 360 Facebook製なので期待 今はA-Frameの方が便利そう

# Page. 11

![Page Image](https://bcdn.docswell.com/page/Z57GYMY7LR.jpg)

A-Frameを使ってみる

# Page. 12

![Page Image](https://bcdn.docswell.com/page/V4EQMR6JP5.jpg)

サンプル

# Page. 13

![Page Image](https://bcdn.docswell.com/page/DKJ4V8ME1Q.jpg)

サンプル

# Page. 14

![Page Image](https://bcdn.docswell.com/page/PLE132YJGD.jpg)

WebVRポートフォリオ ● ● 成果物を貼ってリンク ワープで移動できる

# Page. 15

![Page Image](https://bcdn.docswell.com/page/8GEWPR1J26.jpg)

Super Hands ● ● ● ものをつかめる 両手で縮小したりも 物理エンジンとの組み合わせに対応

# Page. 16

![Page Image](https://bcdn.docswell.com/page/W47ZKRX73Y.jpg)

ラジコン ● ● Oculus Questのスティックで操作して遊ぶ ブラウザなのでキーボードでも可能

# Page. 17

![Page Image](https://bcdn.docswell.com/page/KYJ6QRPJVZ.jpg)

音ゲーも作ってみてる 適当なデザインでも VRというだけでかっこよく見える 完成したら簡単に公開できるので マネタイズ試したい

# Page. 18

![Page Image](https://bcdn.docswell.com/page/5GJ5R8P748.jpg)

まとめ ● ● ● ● ● ● ● ● とにかく楽なので楽しい まだゲームも少ないので需要はかなり高いのでは？ Steam+VirtualDesktopでもVRゲームできるのでそちらとの棲み分けどうなるか 人気がでるくらい良いものが作れるならそもそもOculusストアに出したほうが良かっ たと後悔しそう？（価格やマネタイズ方法が自由なのでどちらがベスト、というのは 今後もなさそう？） 小さいものを公開するならこれ一択？ UnityでWebVR書き出しできるのでプラットフォーム変更を考慮したら一番堅実かも Unreal Engineは今のところ未対応？？？？ とにかくWebVR気になる存在

