1. sakaryu

    No comment

    sakaryu
Changes in body
Source | HTML | Preview
@@ -1,176 +1,177 @@
# はじめに
この記事は[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
<!doctype HTML>
<html>
<!-- A-Frame ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<body style='margin:0px; overflow:hidden;'>
<!-- こっからA-Frame -->
<a-scene embedded arjs="debugUIEnabled:false;trackingMethod:best;" vr-mode-ui="enabled: false">
<!-- オブジェクトファイルとマテリアルファイルを読み込む -->
<a-assets>
<a-asset-item id="sample-obj" src="model_obj/sample/sample.obj"></a-asset-item>
<a-asset-item id="sample-mtl" src="model_obj/sample/sanple.mtl"></a-asset-item>
</a-assets>
        <!-- こっからARの世界。マーカー上になにを展開するかを書く -->
<a-marker preset="hiro">
<a-obj-model id="sample" src="#sample-obj" mtl="#sample-mtl" position="0 0 0" scale="0.5 0.5 0.5" rotation="0 0 0"></a-obj-model>
<a-text value="Merry X'mas !!!" position="0 1.3 0" align="center"></a-text>
</a-marker>
<!-- arなのでこんな感じでカメラが必要らしい。 -->
<a-entity camera></a-entity>
</a-scene>
<!-- ここまででA-Frameおわり -->
</body>
</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
<!doctype HTML>
<html>
<!-- A-Frame ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<body style='margin:0px; overflow:hidden;'>
<!-- こっからA-Frame -->
<a-scene embedded arjs="debugUIEnabled:false;trackingMethod:best;" vr-mode-ui="enabled: false">
<!-- オブジェクトファイルとマテリアルファイルを読み込む -->
<a-assets>
<a-asset-item id="santa-obj" src="model_obj/santa/santa.obj"></a-asset-item>
<a-asset-item id="santa-mtl" src="model_obj/santa/santa.mtl"></a-asset-item>
</a-assets>
        <!-- こっからARの世界。マーカー上になにを展開するかを書く -->
<a-marker preset="hiro">
<a-obj-model id="santa" src="#santa-obj" mtl="#santa-mtl" position="0 0 0" scale="0.5 0.5 0.5" rotation="0 0 0"></a-obj-model>
<a-text value="Hello YouTube!!!" position="0 1.3 0" align="center"></a-text>
</a-marker>
<!-- arなのでこんな感じでカメラが必要らしい。 -->
<a-entity camera></a-entity>
</a-scene>
<!-- ここまででA-Frameおわり -->
</body>
</html>
```
以上でサンタさんがいい感じで見れるようになります。
WebAR、思いのほか簡単ですね、、、!
-# おわりに
+# まとめ
+WebAR実はちょろい。