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

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

コチラの記事[「AR.jsとA-Frameを使ってキャラクターが飛び出すARを作成」](https://qiita.com/Rekt-Order/items/09898f42fa66bdb2e370)に記載のとおり、前回は名刺からキャラクターが飛び出すARをつくってみました。

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

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

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

### 用意するもの

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

※この2つは、前回の記事にて詳しく解説をしています。ぜひ[コチラ](https://qiita.com/Rekt-Order/items/09898f42fa66bdb2e370)をご覧ください。

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

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

![スクリーンショット 2023-07-10 123328.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/6b698210-fb88-a4f9-9e01-4f7c1f49f158.jpeg)


※[「【Blender×Sketchfab】Blenderで本棚を改造してみた」](https://qiita.com/Rekt-Order/items/2ab5b3747132fcea4337)の記事の中で紹介をしています。

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

## ARに必要なデータを作成
### 「AR.js studio」で必要ファイルを取得

今回は、ARマーカーや必要なコード一式を取得できるツール[「AR.js studio」](https://ar-js-org.github.io/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」を押す

![スクリーンショット 2023-07-10 124041.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/723ed9f0-a952-80a2-86c9-d766770b5c24.jpeg)


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

![スクリーンショット 2023-07-10 124201.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/03692197-93f5-6c48-d7e6-2b668d3e7978.jpeg)


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

![スクリーンショット 2023-07-10 124418.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/d7f7ee7b-cbcf-72bf-48b1-6056d5e17cc2.jpeg)


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

![スクリーンショット 2023-07-10 124729.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/e95de109-1aca-9dfd-5fbf-e7c1464b3589.jpeg)


ここまでが、「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」へ修正します。（黄色の箇所）

![スクリーンショット 2023-07-10 125357.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/11db7ae4-fb38-0d8e-9d48-ca218df71b2f.jpeg)


ここまでで、準備は完了です。あとは、「用意するもの」➀で用意した、データの格納場所へデータ一式をアップロードしていきます。

サーバーへアップロードするファイルの構成はこんなイメージです。

![スクリーンショット 2023-07-10 125654.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/c453b00e-c70b-f23d-d9cc-e9dadce67c30.jpeg)


## メタバースへARマーカーを配置
今回は、無料で利用可能なメタバース空間「Spatial」へ配置してみたいと思います。
※「Spatial」については、[コチラの記事](https://qiita.com/Rekt-Order/items/da0be6f800c906b978f5)をぜひご覧ください。

Spatialでの配置は非常に簡単です。「AR.js studio」で作成、保存したARマーカーを設置するだけ。下記の画像のようにARとして表示したい箇所にARマーカーを置くだけで準備は完了です。

![スクリーンショット 2023-07-10 130331.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/33a80e39-c964-dc6d-5dd6-702ebed2a985.jpeg)


※こちらの画像では、ARマーカーを平面に設置するために「Blender」を使って平面へARマーカーを貼り付けています。

あとは、このARマーカーをカメラで映すと…

![IMG_8759.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/30a37c5d-232f-c5db-1eec-cf5e77e4a214.png)


ブラウザが起動し、無事にドーナツが表示されました。「アバター！後ろ、後ろ！」の完成です。


この記事は、著者が運営するメディア「ぬるぺでぃあ」でも読むことができます（記事は[コチラ](https://miuradonuts.com/2023/07/10/note-007/)）
![](https://miuradonuts.com/wp-content/uploads/2023/06/ヘッダーエリア画像作成.png)