3D茶碗と Avaturn 3D人物モデルをAR表示する無料サンプルサイトを制作し試す
3D茶碗と、Avaturnで制作した3D人物モデル（3Dアバター）をGoogle Model Viewerを用いてiPad miniでAR（拡張現実）表示し動画撮影を試みたので紹介します。
Avaturn 3D人物モデルをGoogle Model Viewer EditorでAR化し、無料Googleサイトに埋め込んでAndroidスマホ（Xperia10iii）のChromeアプリでARアニメーション表示を試してみました。https://t.co/PVDASbdMv4 pic.twitter.com/R29R28ewsC
— DAZgen X (@dazgen48) June 19, 2025
3D茶碗をAR表示
以下の記事を参考にしました。
以下のデモページからソースコードとcyawan.glbデータを拝借しました。
3D人物モデル（3Dアバター）をAR表示
以下の記事でAvaturnで制作した3Dアバターを用いています。
GLBファイルを以下の記事で紹介した「Google Model Viewer Editor」に読み込んでAR化しました。
Googleサイトに埋め込む
以下のページから無料の簡易Webサイトを制作しました。
今回制作したWebサイトは以下です。
iPad miniでARを試す
上記のサンプルWebサイトを、手持ちのiPad miniのChromeアプリで開いて「3D茶碗」と「3D人物モデル」を机の上にAR表示してみました。
★ 3D人物モデルはアニメーション付きなので、3D表示の段階ではアニメーションが始まりますが、なぜかAR表示ではアニメーションができませんでした。今後原因を調べて対応したいと思います。
iPad miniのChromeアプリではARアニメーション表示ができませんでしたが、Androidスマホ（Xperia10iii）のChromeアプリではアニメーション表示ができました・・・🤔💦
Avaturn 3D人物モデルをGoogle Model Viewer EditorでAR化し、無料Googleサイトに埋め込んでAndroidスマホ（Xperia10iii）のChromeアプリでARアニメーション表示を試してみました。https://t.co/PVDASbdMv4 pic.twitter.com/R29R28ewsC
— DAZgen X (@dazgen48) June 19, 2025
★ iPad miniでは床の認識が素早く簡単にできますが、Xperia10iiiでは床の認識がむずかしく時間がかかるのが難点です。また、手持ちのXiaomi 14TではそもそもWebARに対応していないので、Androidは機種依存性があります。
まとめ
3D茶碗と、Avaturnで制作した3D人物モデル（3Dアバター）をGoogle Model Viewerを用いてiPad miniでAR（拡張現実）表示し動画撮影を試みたので紹介しています。
GoogleサイトによるARコンテンツの表示方法については、Webサイト制作の初心者には多少ハードルが高いと思います。もし、ご要望があれば、初心者向けマニュアル（有料記事）を執筆しますので、コメントにてご連絡ください。
今後は、3D人物モデルのARアニメーション表示方法を試行錯誤しつつ検証したいと思います。
