前回は…名刺から忍者が飛び出る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」を開いてください。開くと、下記のようなコードになっています。

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

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

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

メタバースへARマーカーを配置

今回は、無料で利用可能なメタバース空間「Spatial」へ配置してみたいと思います。※「Spatial」については、コチラの記事をぜひご覧ください。

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

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

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

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

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

ダウンロード