🐰

AR年賀 Webアプリを作ってみた

2022/12/22に公開約3,100字

こんにちは。 なんか作ろうの会の阿部です。
2023年に向けてAR Webアプリを作ったので手順をシェアします。
https://www.8thwall.com/hike/greeting2023

使ったプラットフォーム"8th Wall"はこちら。
https://www.8thwall.com
Unity/Unrealでビルドしたアプリをモバイルにインストールする形式ではなく
Web上に設定したARアプリをブラウザでダウンロードする形式のため、インストール不要で手軽に配信できる点が特徴です。

1.テンプレートをコピーする


Project Libraryの画面に移動し、検索テキストに「Character Camera」と入力して、表示されたプロジェクトを選択します。


プロジェクトの画面が表示されたらClone Projectボタンを押下します。


URLとプロジェクト名を入れてCreateボタンを押下しましょう。

2.プロジェクトデータを確認する


プロジェクトのコピーが終わると編集画面が表示されます。
左のツリーからglbファイルを選択すると3Dビューアが起動し、テキストファイルを選択するとテキストエディタが起動します。

3.モデルファイルを投入する

新年の挨拶っぽくしたいのでテンプレートに入っている鹿をウサギと門松に変更します。

モデリングと動き付けはBlender3.4を使用しました。
https://www.blender.org/download/

ウサギのモデリングは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

ログインするとコメントできます