顔にサングラスを重ねるWebARデモ
AR

顔にサングラスを重ねるWebARデモ

iPhoneやAndroidのブラウザでカメラを起動し、顔の動きに合わせて3Dサングラスが追従するWebARデモです。ヘッドセットなしで気軽に体験できます。

#WebAR#8th Wall#A-Frame#Face Effects#face attachment#face mesh

難易度

初級

フレームワーク

8th WallA-Frame

対応デバイス

iPhoneAndroidデスクトップ
XでシェアB!はてブする
体験可スマホで体験する

スマホで顔ARを体験

このデモで体験できること: スマートフォンのカメラで、顔にサングラスを重ねて表示します

iPhoneやAndroidのブラウザで、顔に3Dサングラスを重ねるWebARデモです。カメラ許可後、顔の動きに合わせてサングラスが追従します。

おすすめの環境

iPhone / Android

デモを開くデモ一覧に戻る

XRを開始できない場合は、ブラウザや端末の対応状況をご確認ください。対応デバイスで開くと、より正確に体験を確認できます。

iPhone

体験可

SafariなどのブラウザでカメラベースのWebARを体験できます。

Android

体験可

カメラ許可後、顔追従と色の切り替えを確認できます。

Meta Quest / PICO

対象外

スマートフォン向けの顔ARデモです。

体験フロー

  1. 1スマートフォンのブラウザでデモを開き、カメラを許可する。
  2. 2顔を正面に入れ、サングラスが目元に追従するか確認する。
  3. 3色の切り替えや、明るさの違う場所での見え方を確認する。

うまく動かない場合

カメラが利用できない環境では、デモを開始できません。ブラウザのカメラ権限や別の端末をご確認ください。

確認ポイント

確認ポイントは、カメラ許可、顔追従、色の切り替え、暗い場所や横向きでの見え方です。

ヘッドセットに送る

ヘッドセットのブラウザ（Quest Browser / PICO Browser）でカメラまたはQR読み取りからこのコードを開くと、デモの全画面ページに直接入れます。

https://www.bangeo.net/demos/8thwall-face-glasses/demo.html

8th Wall の Face Effects を使い、カメラに映った顔に3Dサングラスをリアルタイムで重ねるWebARデモです。

xrextras-face-attachment で、face mesh の landmarks（左右の目・鼻・耳の特徴点）にサングラスの各パーツを配置し、顔の動きに合わせてリアルタイムで追従します。画面下部のボタンで黒・赤・青の3色を切り替えられます。

スクリプトはローカルに配置した xr-standalone/xrextras.js と xr-standalone/xr.js の組み合わせで構成しています。iOS Safari も WebXR 非対応のまま getUserMedia ベースで動くため、iPhone・Android・デスクトップの主要ブラウザで利用できます。

用語メモ

用語このページでの意味
Face Effects8th Wall の顔トラッキング機能群。face mesh 取得、face attachment、3D オブジェクト追従などを含む
face attachmentxrextras-face-attachment コンポーネント。face mesh の landmarks に3Dオブジェクトを固定する
face mesh8th Wall / ARKit が検出する顔のメッシュ。landmarks（特徴点）を含む