ARコンテンツ作成勉強会:A-Frameを使ったお手軽WebVR
イベント説明
Oculus、HTCVive、PlayStationVRなど、様々なHMD(ヘッドマウントディスプレイ)や
Kinect、Leap Motion、MYOなどの入力デバイスの普及によって今年はVR元年といわれ、
VRブームが到来しています。
そんなVRをブラウザ上で実現してしまおうという規格がWebVRで、WebVRを簡単なHTML・Javascriptを使って実現できるライブラリがA-Frameとなります。
では、WebVR・A-Frameとはどんなものなのか?
以下のA-Frameサイトにいくつかサンプルがありますので、見ていただくとどんなものかイメージがつかめるかと思います。開いたサイトの左側の「Examlpes」と書いてある下のお好きなリンクをクリックしてください。
注意:Google Chromeを使って見てください。マウスで方向転換し、WASDキーで移動します。
https://aframe.io/
今回のハンズオンでは、A-Frameの基礎知識を学び、実際に手を動かすことによって自分でVRサイトを作成できるようになります。ハンズオンでは、以下のような迷路を作成します。
注意:Google Chromeを使って見てください。マウスで方向転換し、WASDキーで移動します。
A-Frameで迷路を作成する
その後、A-Frame上でLeapMotionを使ったハンズオンも行います。
LeapMotionで360度画像を操作する
時間に余裕があれば、LeapMotionでお絵かきする実装方法をご紹介します。
LeapMotionで3D空間にお絵かきする
----- 開催概要 -----
■参加費:無料
■予定時間:13:00~17:00
■対象:
・VRに興味がある人
・HTML、Javascriptの知識がある人(かじったことがある)
■必要なモノ:
・PC
※無線LANでインターネットにつながるものをご用意ください。
※Wi-Fiは会場にてご利用いただけますが、モバイルインターネットをお持ちの方は念のためご持参ください。
■事前準備
・Google Chromeをインストールしておいてください。
・Node.jsをインストールしておいてください。
コマンドラインで以下のコマンドが実行できればOKです。 (表示されるバージョンは環境によって違います。) > node -v v6.4.0 > npm -version 3.10.3・HTML、Javascript開発用にお好きなエディタをご用意ください。
※10月16日 事前準備を追加しました・Gitをインストールしておいてください
コマンドラインで以下のコマンドが実行できればOKです。 (表示されるバージョンは環境によって違います。) > git --version git version 2.10.1.windows.1・LeapMotionのソフトウェアをインストールしておいてください。
LeapMotionセットアップサイト(https://www.leapmotion.com/setup?lang=jp)から
左側のソフト(デベロッパーインストーラーではないほう)をダウンロードして
インストールしてください。 事前準備でわからない方は、早めに来ていただければ環境設定お手伝いいたします。
場所は12時から開けています。
とくにNode.jsなんてわからないと思いますので、説明しながらインストールさせていただきます。
開催日
2016年10月23日13:00 ~ 2016年10月23日17:00
主催者・問い合わせ先
開催場所
項目 | 内容 |
---|---|
場所 | 名称未設定 |
住所 | 福岡県福岡市早良区 |
開催場所の地図
SNS・Bookmark
近隣のイベント
- 2018年9月17日 - キレイな写真の撮られ方 30分で変わる写真写り!
- 2018年9月14日 - ヨカラボ天神×Jimdo「実務に活用しよう!ホームページ作成ワークショップ」
- 2018年9月13日 - i.Study もくもく会
- 2018年9月9日 - 9/9【福岡 久留米】 ゼビオ 20kmロング走 完走プロジェクト
- 2018年9月8日 - 【福岡】レターポットについて興味あり・知りたい・新オーナーとお話ししたい方向けのイベント
- 2018年9月3日 - MMD技術交換会
- 2018年8月31日 - Gontex テーピング講習会
- 2018年8月30日 - i.Study もくもく会
- 2018年8月29日 - 平成最後の夏だから.....『夏歌ごり押しタイム!』
近隣の場所 (直線距離)
- 近隣の場所が見つかりませんでした。