【AR.jsとA-Frameを使った遊び続編】メタバース内にドーナツをARで表示してみよう

前回は…名刺から忍者が飛び出るARを制作

コチラの記事「AR.jsとA-Frameを使ってキャラクターが飛び出すARを作成」に記載のとおり、前回は名刺からキャラクターが飛び出すARをつくってみました。

※AR初心者の私の奮闘を、上記記事にて、ぜひご覧ください。

今回は、ここで得た知見を生かして、メタバース内にARを設置してみたいと思います。

題して…「『アバター！後ろ、後ろ！』をARで作ってみた」です。

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

ダウンロード

用意するもの

➀データを格納する場所（サーバー）を準備する
➁webページへアクセスできるQRコードを準備する
QRコードは「QRのススメ」から簡単に作成可能です。

※この2つは、前回の記事にて詳しく解説をしています。ぜひコチラをご覧ください。

➂飛び出す立体物（イラストでもいいのですが、今回は立体物にしてみました）
今回は「Sketcfab」という無料で使える3Dモデルを集めたプラットフォーム内のモデルを使って、試してみます。

せっかくなので、立体のドーナツを表示させてみたいと思います。

※「【Blender×Sketchfab】Blenderで本棚を改造してみた」の記事の中で紹介をしています。

ここまで用意ができたら、次のステップへ進みます。

ARに必要なデータを作成

「AR.js studio」で必要ファイルを取得

今回は、ARマーカーや必要なコード一式を取得できるツール「AR.js studio」を使用します。とても簡単に使えて、非常に便利なんです。

AR.js studioとは？

下記に「AR.js studio」の特徴を簡単に紹介します。

・無料で使えるブラウザベースのアプリケーション
・位置やARマーカーをつかったARを作成可能
・ARで表示可能なコンテンツは3D／画像／動画

※アップロード制限
・3D：gltf／glb／zip（最大サイズ50MBまで）
・画像：jpg／png／gif（最大サイズ15MBまで）
・動画：mp4（最大サイズ25MBまで）

「AR.js studio」の使い方

➀TOPページ
「Marker-based」にチェックを入れて、「Start building」を押す

➁「1.Use a premade marker or upload your own」の項目
・「用意するもの」➁で準備したQRコードを「Upload image」からアップロードする
・アップロードができたら、「Download marker」からダウンロードし、保存する

➂「2. Choose the content」の項目
・「用意するもの」➂で準備した立体物を「Upload file」からアップロードする
・上手くアップロードできると、Viewに表示される

➃「3. Export the project」の項目
・「Download package」より、パッケージフォルダ（ZIP形式）をダウンロードする
※「ar.zip」というフォルダになっています

ここまでが、「AR.js studio」上で行う内容となります。

パッケージフォルダ内のコードを１箇所だけ修正

上記でダウンロードしたパッケージフォルダ「ar.zip」を解凍します。
ここで解凍したファイルの中には、アセットファイルとコードが格納されているのですが、コードの一部が古い情報のため、１箇所だけ修正する必要があります。（決して難しくないので、ぜひトライしてみてください）

パッケージフォルダを解凍すると、「assets」というフォルダと「index.html」が出現しますので、エディタソフトで「index.html」を開いてください。開くと、下記のようなコードになっています。

<!doctype html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
        <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
    </head>

    <body style="margin: 0; overflow: hidden;">
        <a-scene
            vr-mode-ui="enabled: false;"
            loading-screen="enabled: false;"
            renderer="logarithmicDepthBuffer: true;"
            arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
            id="scene"
            embedded
            gesture-detector
        >
            <a-assets>
                <a-asset-item
                    id="animated-asset"
                    src="assets/asset.glb"
                ></a-asset-item>
            </a-assets>

            <a-marker
                id="animated-marker"
                type="pattern"
                preset="custom"
                url="assets/marker.patt"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
                id="markerA"
            >
                <a-entity
                    id="bowser-model"
                    scale="0.0105254363187677 0.0105254363187677 0.0105254363187677"
                    animation-mixer="loop: repeat"
                    gltf-model="#animated-asset"
                    class="clickable"
                    gesture-handler
                ></a-entity>
            </a-marker>

            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

「aframe.min.js」のバージョンを、「1.0.4」から「1.3.0」へ修正します。（黄色の箇所）