Web AR • MediaPipe + Three.js

AR 3D Air Drawing WebXR Prototype

Webカメラの前で「人差し指を1本立てる(👆)」と、空中に光の3D立体スケッチが描けます。 手をパー(🖐️)にするとペンが離れて移動。VRゴーグル不要で楽しめます。

カメラの起動を待機中...
draw

空中に3Dを描いてみよう

カメラに手を映し、人差し指を1本立てる(👆)と、指先から光のチューブが空間に引かれます。ドラッグすれば空間を斜めや横から鑑賞できます。

👆 人差し指を立てる: 描画
🖐️ 手をパーにする: ペン移動
🔄 ドラッグ: 3D視点回転
📏 前後に手を動かす: 奥行き(Z)

※ 映像データは端末のブラウザ内でのみ処理され、外部には一切送信されません。

touch_app 人差し指を1本立てて描画(パーで移動)
touch_app

人差し指1本の直感ドロー

人差し指をピッと立てるだけで空間に線が描かれます。手をパー(🖐️)にすればペンが離れて移動できるため、カメラの角度に左右されず安定して描画できます。

view_in_ar

リアルタイム奥行き推定 (3D)

手をカメラに近づけると手前に、奥へ引くと奥へ線が引かれます。右上の「3D鑑賞モード」に切り替えると、描いた立体をマウスでぐるぐると全方位から見回せます。

magic_button

完全Webネイティブ(アプリ不要)

専用アプリやVRゴーグルのセットアップは一切不要。PCやスマホのブラウザでURLを開くだけで、MediaPipeとThree.jsがミリ秒単位でリアルタイムに駆動します。