✈️

8thWallで始めるAR名刺作り

2023/04/25に公開

Web

tech

概要

ZapWorksをきっかけにAR名刺作りにハマっているみゃおんです。

今回は、8thWallのImageTrackingのサンプルを用いて簡単にAR名刺用のWebARサイトを公開する手順をまとめます。

作成手順

新規プロジェクト作成のボタンを押したあと、URLを決め、Non-Commercialを選びます。

テンプレートの選択画面が出るので、"Image Traking"で検索します。

今回はA-Frameの方を選択しました。
Launchで動作確認ができ、Clone Projectでプロジェクトを複製した所から始められます。

動作確認した所、右下の画像からは動画、左上の画像からは3Dモデルが出てきました。

編集画面はこんな感じ。一通りファイルを見て構造を確認します。

body.htmlに殆どのコードが書いてあり、それらしいファイルのパスの記載があることも確認できるかと思います（jellyfish-model.glbやvideo-thumbnail.jpgなど）

認識のタイプは3種類あり、今回使うのはFlatです。

Flatを選択し、名刺の画像をアップロード

認識に使う部分をトリミングして

動作確認します。

問題なければ、モデル名（今回はmeishi）を44行目付近のimage-targetに設定します。
その後、何を出すか決め、glb等のモデルを準備してください。用意できたら、左側のAssets内に追加し、そのパスに合わせてa-assetsタグ内のモデル指定を編集します。
今回はplane_anim.glbというファイルを追加したので、idとsrcをそれに合わせて編集しました。

また、今回は3Dモデルを出すだけをしようと思うのでvideo側の処理が書いてあるであろう、15-22行目のvideoタグと14行目のimgタグ、36-41行目のvideo-targetを削除しました。

そして、Previewを見ながら、transformをいじったり、animation-mixerを付けたりして、最終的に出来たコードがこちらです。

body

<!-- Copyright (c) 2022 8th Wall, Inc. -->
<!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->
 
<a-scene
  xrextras-gesture-detector
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true; webgl2: true;"
  xrweb="disableWorldTracking: true">

  <a-assets>
    <a-asset-item id="plane_anim" src="assets/plane_anim.glb"></a-asset-item>
  </a-assets>

  <a-camera
    position="0 4 10"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>

  <a-light type="directional" intensity="0.5" position="1 1 1"></a-light>

  <a-light type="ambient" intensity="0.7"></a-light>

  <!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
  <xrextras-named-image-target name="meishi">
    <!-- Add a child entity that can be rotated independently of the image target. -->
    <a-entity xrextras-one-finger-rotate gltf-model="#plane_anim" position="-1 0 0" rotation="90 0 0" scale="0.1 0.1 0.1" animation-mixer></a-entity>
  </xrextras-named-image-target>

</a-scene>

注意としては、animation-mixerはbodyに追加しただけでは動かず、head.htmlなどに下記コードを追加する必要がありました。
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>

これでPreviewでも想定通りの動作を確認できたら、右上のLandから更新を適用し、Publishで公開出来ます。

契約期間中は下記リンクからも体験出来るので、私からAR名刺もらった方はぜひやってみてください＆みなさんもぜひ作ってみてください！

概要

作成手順

Discussion