AR年賀 Webアプリを作ってみた
こんにちは。 なんか作ろうの会の阿部です。
2023年に向けてAR Webアプリを作ったので手順をシェアします。
使ったプラットフォーム"8th Wall"はこちら。
Unity/Unrealでビルドしたアプリをモバイルにインストールする形式ではなく
Web上に設定したARアプリをブラウザでダウンロードする形式のため、インストール不要で手軽に配信できる点が特徴です。
1．テンプレートをコピーする
Project Libraryの画面に移動し、検索テキストに「Character Camera」と入力して、表示されたプロジェクトを選択します。
プロジェクトの画面が表示されたらClone Projectボタンを押下します。
URLとプロジェクト名を入れてCreateボタンを押下しましょう。
2．プロジェクトデータを確認する
プロジェクトのコピーが終わると編集画面が表示されます。
左のツリーからglbファイルを選択すると3Dビューアが起動し、テキストファイルを選択するとテキストエディタが起動します。
3.モデルファイルを投入する
新年の挨拶っぽくしたいのでテンプレートに入っている鹿をウサギと門松に変更します。
モデリングと動き付けはBlender3.4を使用しました。
ウサギのモデリングはYoutubeを参考にし、門松はyagara.jpから拝借しました。
（工数をかけずにいい感じになったので大変助かりました！）
BlenderでExportしたglbファイルをプロジェクトにドラッグ＆ドロップします。
4.モデルファイルに合わせてJS/htmlを編集する
body.htmlを編集し モデル名を"reindeer-draco.glb"から投入したモデルのファイル名に変更します。
次にcomponents.jsを編集します。
const updatePoseNames = () => {
if (this.el.object3D.children[0] &&
this.el.object3D.children[0].animations &&
this.el.object3D.children[0].animations.length >= 2) {
idlePose = 'Idle' // this.el.object3D.children[0].animations[2].name
motionPose = 'Walk' || idlePose // this.el.object3D.children[0].animations[1].name || idlePose
}
if (idlePose) {
el.setAttribute('animation-mixer', `clip:${idlePose};loop:repeat`)
}
updatePoseNamesのidlePoseとmotionPoseをモデル内のアニメーションの名称に変更します。
今回は首振りを"Idle",移動を"Walk",踊りを”dance”としてBlenderのノンリニアアニメーションとして定義しました。
サンプルにはキャラクターをタップすると鼻の色が変わる効果が仕込んでありますが
今回はテクスチャの切り替えを仕込んでいないので、処理をコメントアウトしました。
// applyCustomTexture(this.el.getObject3D('mesh'), 'red')
// applyCustomTexture(this.el.getObject3D('mesh'), 'purple')
2箇所あるapplyCustomTextureをコメントアウトしてます。
5.Saveして動作確認
画面上部にあるSave＋Buildをクリックして保存します。
隣のPreviewボタンを押下するとQRが表示されるので、モバイルで撮影するとWebアプリのリンクが取得できます。
動作を試してみましょう！
6.動作がOKならPublishして公開
動作が期待通りなら一番右のPublishボタンを押下して公開しましょう。
Staging環境はパスワード付き公開、Publicはパスワードなしで公開できます。
Blender/JS/HTMLが使えれば、世界中にARアプリが届けられる、すごい時代になりました。
Discussion