Help us understand the problem. What is going on with this article?

【AR.js入門】簡単にWebARで遊んでみた【A-Frame使うよ】

※ 2019/11/6 更新
GitHub Pagesのリンクが変わったので更新

はじめに

この記事はUUUM Advent Calendar 2018 22日目の記事です!

ARで遊びたくなったので、WebでARやる方法しらべてみたんですが、意外と簡単でした。
みなさん一緒にARで遊びましょうー!

【もくじ】

  • はじめに
  • この記事について
  • とりあえずデモ
  • 具体的な作り方
    • 手順
    • ソースコード
    • A-Frameのタグの紹介
    • オブジェクトファイルについて
  • 実践
  • おわりに

この記事について

【この記事の対象者】

  • ARで遊びたい人
  • WebAR初心者
  • a-frameもよくしらないけど知りたい

【この記事の目指すところ】

  • WebARで遊べる簡単なサイトを作る

【この記事で使うライブラリの紹介】

【AR事前知識:ARマーカー】

基本的にはARは、ARマーカーを用いて遊びます。
今回使うマーカーはこんな感じのです↓
hiro.png
このマーカーをデモの下のリンク先のページのカメラでかざすと、設定したオブジェクト達が出てきます。

とりあえずデモ

【デモ】
ARデモ

ここで遊べます(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オブジェクトの位置とか大きさを指定する

以上。
では、以下サンプルのソースコードです。

【ソースコード】

<!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-modela-asset-itemで読み込んだリソースを、これで表示。大きさとか位置を指定する。
  • a-text:文字のオブジェクトを出せる。日本語不可。()
  • a-entity:なんか汎用性高いやつ。よくわかんないけどWebカメラ使うのに用いてる

さきほどのソースコードの中では、
a-asset-item
a-obj-model
a-text
が主ないじる対象です。

それでは、今からオブジェクトを用意して、表示させるところまでやってみましょう。
と、その前にオブジェクトファイルについて軽く触れときます。

【オブジェクトファイルについて】

3Dオブジェクトのファイル形式の1つになります。今回は、objファイルを読み込んで、ARで表示させてます。
もしobjファイルとmtlファイル(+画像ファイル)を持っていれば、そのオブジェクトをAR上に出せるので、ぜひそちらで試してみてください。
持ってない人にはsantaオブジェクトをお貸しします。
ちなみに、フリーでダウンロードできたりします。いろいろあるので見てみてください。

実践

はい、とりあえずsantaオブジェクトのリソースをこんな感じでファイルに配置します。
注意するのは、santa.mtlとmain.pngとかのUVマップ画像が同じ階層にあることです。

model_obj
  └ santa
    ├ santa.obj
    ├ santa.mtl
    ├ main.png (mtlファイルに付随したテクスチャファイル)
    ├ ...
    └ (以下省略)
index.html

そして、さきほど紹介したindex.htmlのサンプルコードに以下の修正を加えます。

  • sampleのところをsantaに変える
  • a-obj-modelpositionscalerotationを必要に応じて調整する
  • あとa-textも同様に調整する

完成したソースコードはこちら

<!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実はちょろい。

sakaryu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした