概要

Gesture3D Studioは、ウェブカメラから取得した手の動きを使って3Dシーン内のモデルを直感的に操作するためのインタラクティブなウェブアプリです。React + TypeScriptを基盤に、react-three-fiber（Three.jsのReactラッパー）で3Dレンダリングを行い、GoogleのMediaPipeをハンドトラッキングに採用。GLB形式の3Dモデルを読み込み、ジェスチャーに応じてモデルの回転・拡大縮小やシーン内ライトの制御などをリアルタイムで反映します。プロトタイピングやUI/UX実験、デモンストレーション用途に適した設計が特徴です。（約300字）

リポジトリの統計情報

スター数: 5
フォーク数: 0
ウォッチャー数: 5
コミット数: 6
ファイル数: 12
メインの言語: TypeScript

主な特徴

MediaPipeを用いたブラウザ上のハンドトラッキングでジェスチャー検出を実現
react-three-fiber / Three.jsでGLBモデルをリアルタイムにレンダリング
ジェスチャーを回転・スケール・移動などの3D操作にマッピング
シーンライティングやカメラなどのパラメータをインタラクティブに調整可能

技術的なポイント

Gesture3D Studioはフロントエンド技術を組み合わせ、リアルタイム性と表現力を両立しています。MediaPipeはブラウザ側で軽量に手のランドマークを推定し、その2D/3D座標を元にジェスチャー（ピンチ、グラブ、指の向きなど）を抽出します。抽出したジェスチャーはreact-three-fiberで構築されたシーンにイベントとして渡され、GLBモデルのトランスフォーム（position, rotation, scale）や、マテリアル・ライトのパラメータに反映されます。TypeScriptで型安全に実装されているため、ランドマークの型定義やジェスチャー状態の管理が明確です。さらに、Three.jsの利点を活かし、物理ベースレンダリングや複数ライト設定、環境マップの導入が容易で、視覚表現の幅を広げられます。実装面では、パフォーマンスの観点からrequestAnimationFrameベースで描画ループを制御し、必要に応じてスロットリングや平滑化（フィルタリング）をかけることでトラッキングのノイズを低減しています。コンポーネント構成はReactの慣習に沿って分割されており、カメラ・コントロール系、ハンドラ（MediaPipe）系、シーン構築系が責務ごとに分かれているため、機能追加や実験的な拡張がしやすい作りです。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
App.tsx: file
README.md: file
components: dir
constants.ts: file

…他 7 ファイル

まとめ

ブラウザで手軽に試せるジェスチャー駆動の3Dインタラクション実験として有用です（約50字）。

リポジトリ情報：

名前: gesture-3d-studio
説明: Gesture3D Studio is an interactive web app that uses hand gestures to control 3D models in real-time with webcam input. Built with React, Three.js, and MediaPipe, it supports gesture-based manipulation and custom scene lighting.
スター数: 5
言語: TypeScript
URL: https://github.com/amerob/gesture-3d-studio
オーナー: amerob
アバター: https://avatars.githubusercontent.com/u/75348356?v=4

READMEの抜粋：

Gesture3D Studio

Gesture3D Studio is an interactive web experiment that merges Computer Vision with 3D rendering. It allows users to manipulate 3D GLB/…

Gesture3D Studio（ジェスチャー3Dスタジオ）