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がミリ秒単位でリアルタイムに駆動します。