AR.jsとA-Frameを使ったキャラクターが飛び出すARの作り方

2023年7月23日

名刺から忍者が飛び出すARって…難しい？

名刺にARマーカー（QRコードみたいな）を設置して、カメラを向けるとキャラクターが飛び出るような…そんなことがしたいと思いました。

名刺にカメラをかざすと…キャラクターが出てくる！…そんなのをイメージしています。

今回は、忍者のイラストを使って、忍者が飛び出すARを自作してみたいと思います。

※今回紹介したコードと3Dデータ一式を下記へ格納しています。

ダウンロード

ARで忍者を召喚する前に…下準備

色々と調べてみると、「AR.js」と「A-Frame」を使えば、割と簡単にできるらしい…ということが分かりました。私が試した流れは下記の通りです。

①データを格納する場所（サーバー）を準備する

この後登場する「index.html」をwebページとして公開するため、サーバーを用意します。
※ブラウザでWebページとして表示させることができる場所を確保できればOKです。サーバーを契約していない方は、「Github」の「GitPages」という機能を使うことで、無料で用意することも可能です。

※ GitPagesの使い方はコチラ

私の場合、メディア「ぬるぺでぃあ」を運用しているので、「miuradonuts.com～」のサーバーへデータ一式を格納することにしました。

※「ぬるぺでぃあ」では、X-serverを契約しています。紹介リンクを下記へ貼っておきますので、サーバーを契約したい方はご参考までに。

X-Serverの紹介リンクはコチラです

②webページへアクセスできるQRコードを準備する

ウェブページとして公開する「index.html」を格納する場所（URL）から、QRコードを作成します。URLリンクから、QRコードを作成するのはコチラが非常に簡単で便利です。

ここで作成したQRコードを一旦、保存しておきます。

③作成したQRコードからARマーカーを作る

ARマーカーは、「AR.js marker Training」にて作成が可能です。

「UPLOAD」から、「②」で作成したQRコードをアップロードする
「DOWNLOAD MARKER」から、pattファイルをダウンロードする
「DOWNLOAD IMAGE」から、pngファイルをダウンロードする

いよいよ、ARで忍者を召喚！

サンプルコードでそのまま動くように、ファイル名やフォルダ名の例を挙げながら、説明を進めます。

※もちろん、コード内のファイル名・フォルダ名と一致していれば、好きな名前で保存して頂いて構いません。

下記のHTMLコード：index.html という名前で保存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>NINJA-AR</title>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs="debugUIEnabled:false;">
        <a-entity camera></a-entity>
        <!-- Markerを表示した際の処理を以下に記述する -->
        <!-- ARマーカーのファイル名をここで指定する -->
        <a-marker type="pattern" url="img/pattern_simple_qrcode.patt">
            <!-- 表示したい画像を src= ～ で指定する -->
            <!-- 画像の大きさは width と height で設定可能 -->
            <!-- 画像を表示させる位置は position で設定可能 -->
            <!-- 画像を水平に表示させる場合は下記の rotation でOK -->
            <a-image width="5" height="5" position="0.2 0.4 0.4" rotation="-90 0 0" src="img/icon.png">
            </a-image>
        </a-marker>
    </a-scene>
</body>
</html>

※「img」という名前のフォルダを、「index.html」と同じ階層に作成する

■表示させたい画像：
icon.png という名前で保存し、「img」フォルダへ

■ARマーカーのIMAGE：
「pattern_simple_qrcode.png」という名前で保存し、「img」フォルダへ

■ARマーカーのMARKER：
「pattern_simple_qrcode.patt」という名前で保存し、「img」フォルダへ

以上で必要なものは準備OK！あとは…「ARマーカー」（pattern_simple_qrcode.png）をスマホのカメラで読み取るだけです！

こんな風に、「icon.png」の忍者をARで召喚することができました。

カスタマイズのポイント

今回は、「icon.png」という１枚の画像だけでしたが、レイアウトさえ注意すれば複数枚の画像を表示させることも可能です。

<a-image width="5" height="5" position="0.2 0.4 0.4" rotation="-90 0 0" src="img/icon.png"></a-image>

このコードで１つの画像となるので、複数枚の画像を表示したい場合には、上記のコードをコピーして増やして頂ければOKです。

画像の大きさを変える場合：width と height で設定できます
画像を表示させる位置を変える場合： position で設定できます
画像を水平に表示させる場合：rotation の最初の角度を「-90」にします
読み込む画像:　src="img/icon.png" のようにパスで記載をします

このルールさえ覚えておくだけで、カスタマイズもかなりできますので、ぜひ触ってみてください。

※今回紹介したコードと3Dデータ一式を下記へ格納しています。

ダウンロード

A. Miura

通称「みうらドーナツ」。本業はRPA／DX系のSEであり、ねじねじドーナツ部長の作者でもある。大好きなドーナツにハマってしまい、ドーナツとの共同生活を送っている「部長」さんの日常をNFT化する日々を送る。

プロフィール詳細

「ぬるぺでぃあ」の更新通知を受け取ろう！