内容

ARマーカーを利用したWebARアプリ開発

ARマーカーをカメラで読み込むと，マーカー上に3Dモデルが出現するアプリを開発しました．3Dモデル出現後，そのドラッグやローテーション，ピンチ操作ができるようにしました．また，アプリ内機能でスナップショットを撮影すると，そのスナップショットにロゴ画像やタイムスタンプを挿入できるようにしました．さらに，画面をタップ・クリックすることで，Three.jsで作成したアニメーションを再生するようにもしました．

ARマーカーを利用しないWebARアプリ開発

Scene ViewerやQuickLookを利用した，ARで3Dモデルを表示するWebアプリを開発しました．こちらはOSネイティブの機能を利用しているため，上記アプリよりも表示や操作を滑らかに行えます．

トップページの「yif11」の3Dモデルの表示にこの技術を利用しています．通常時はページ内で3Dモデルの表示と操作ができるだけですが，AR対応端末は3Dモデルの右下にARボタンが表示され，これを押下すると，ARで「yif11」の3Dモデルを表示することができます．

キーワード

• WebGL
• WebAR
• Three.js