--- title: 【AR.js入門】簡単にWebARで遊んでみた【A-Frame使うよ】 tags: AR.js A-Frame AR JavaScript author: sakaryu slide: false --- ※ 2019/11/6 更新 GitHub Pagesのリンクが変わったので更新 # はじめに この記事は[UUUM Advent Calendar 2018](https://qiita.com/advent-calendar/2018/uuum) 22日目の記事です! ARで遊びたくなったので、WebでARやる方法しらべてみたんですが、意外と簡単でした。 みなさん一緒にARで遊びましょうー! ### 【もくじ】 - はじめに - この記事について - とりあえずデモ - 具体的な作り方 - 手順 - ソースコード - A-Frameのタグの紹介 - オブジェクトファイルについて - 実践 - おわりに # この記事について ### 【この記事の対象者】 - ARで遊びたい人 - WebAR初心者 - a-frameもよくしらないけど知りたい ### 【この記事の目指すところ】 - WebARで遊べる簡単なサイトを作る ### 【この記事で使うライブラリの紹介】 - **aframe** - WebVRを手軽にできるようにしたライブラリ。つよい。 - https://github.com/aframevr/aframe - **ar.js** - WebARを手軽にできるようにしたライブラリ。aframeを使う。つよい。 - https://github.com/jeromeetienne/AR.js ### 【AR事前知識:ARマーカー】 基本的にはARは、ARマーカーを用いて遊びます。 今回使うマーカーはこんな感じのです↓ ![hiro.png](https://qiita-image-store.s3.amazonaws.com/0/84407/77d52724-f070-cd62-f003-fdaaf18074c3.png) このマーカーをデモの下のリンク先のページのカメラでかざすと、設定したオブジェクト達が出てきます。 # とりあえずデモ 【デモ】 ![ARデモ](https://media.giphy.com/media/5tsdJTdh9zmxme1Sqd/giphy.gif) [ここ](https://sakaryu.github.io/ar-test)で遊べます(GitHub Pages) (スマホで開いて、この記事でさきほど出てきたマーカーにカメラをかざすとARが見れるよ) GitHubはこちら https://github.com/sakaryu/ar-test # 具体的な作り方 ### 【手順】 ①今回表示させたいオブジェクトのobjファイルとmtlファイル(+UVマップ画像)を、適当にディレクトリに配置しとく(これらのファイルは後述) 〜〜 以下index.html内 〜〜 ②a-frameとar.jsをscriptタグで埋め込む ③a-frameのタグをいくつか配置する(後述) ④objファイルとmtlファイルを`a-asset-item`で読み込む ⑤`a-obj-model`でARオブジェクトの位置とか大きさを指定する 以上。 では、以下サンプルのソースコードです。 ### 【ソースコード】 ```html          ``` このhtmlファイルの、オブジェクトの指定部分とかをいじったら、もう完成です。 以下、a-frameのタグの簡単な紹介になります。 ### 【A-Frameのタグの紹介】 - `a-scene`:なんかa-frameの最初に書くやつ - `a-assets`:リソース(オブジェクト)の読み込み的なイメージ - `a-asset-item`:リソース(オブジェクト)を指定する - `a-marker`:起点となるマーカー。`preset=hiro`で、デフォルトのhiroマーカー(このページにも載せたやつ)が認識の対象になる - `a-obj-model`:`a-asset-item`で読み込んだリソースを、これで表示。大きさとか位置を指定する。 - `a-text`:文字のオブジェクトを出せる。日本語不可。() - `a-entity`:なんか汎用性高いやつ。よくわかんないけどWebカメラ使うのに用いてる さきほどのソースコードの中では、 ・`a-asset-item` ・`a-obj-model` ・`a-text` が主ないじる対象です。 それでは、今からオブジェクトを用意して、表示させるところまでやってみましょう。 と、その前にオブジェクトファイルについて軽く触れときます。 ### 【オブジェクトファイルについて】 3Dオブジェクトのファイル形式の1つになります。今回は、objファイルを読み込んで、ARで表示させてます。 もしobjファイルとmtlファイル(+画像ファイル)を持っていれば、そのオブジェクトをAR上に出せるので、ぜひそちらで試してみてください。 持ってない人には[santaオブジェクト](https://github.com/sakaryu/ar_test/tree/master/model_obj/santa)をお貸しします。 ちなみに、[フリー](https://free3d.com)でダウンロードできたりします。いろいろあるので見てみてください。 # 実践 はい、とりあえずsantaオブジェクトのリソースをこんな感じでファイルに配置します。 注意するのは、santa.mtlとmain.pngとかのUVマップ画像が同じ階層にあることです。 ``` model_obj └ santa ├ santa.obj ├ santa.mtl ├ main.png (mtlファイルに付随したテクスチャファイル) ├ ... └ (以下省略) index.html ``` そして、さきほど紹介したindex.htmlのサンプルコードに以下の修正を加えます。 - sampleのところをsantaに変える - `a-obj-model`の`position`と`scale`と`rotation`を必要に応じて調整する - あと`a-text`も同様に調整する 完成したソースコードはこちら ```html          ``` 以上でサンタさんがいい感じで見れるようになります。 WebAR、思いのほか簡単ですね、、、! # まとめ WebAR実はちょろい。