React Three Fiber と骨格推定を組み合わせて 3D 動作可視化を作る

Webカメラ映像から人物の骨格を推定し、その結果を3D空間に描画できると、フォーム確認、姿勢可視化、動作分析、アバター操作などの表現が一気に広がります。

この記事では、@react-three/fiber と骨格推定を組み合わせて、ブラウザ上で3Dの動作可視化を作る考え方を整理します。

この記事で扱うテーマ

今回の主題は、Reactベースの3D描画ライブラリである React Three Fiber と、ブラウザで動く骨格推定をつなぐことです。

カメラ映像から骨格キーポイントを取得する
取得した座標を React の状態として保持する
React Three Fiber で3Dの点や線として描画する
必要に応じてアバターやモーション可視化へ発展させる

実装の入口としては、骨格を球と線で描くだけでも十分に価値があります。そこから角度計算、関節追跡、姿勢判定、動作分類へ広げていけます。

なぜ React Three Fiber を使うのか

React Three Fiber は、Three.js を React から扱うためのレンダラーです。3Dシーンを JSX で書けるため、状態管理やUIと3D表示を同じ React の流れで組み立てやすいのが大きな利点です。

相性が良い理由:
骨格推定の結果はフレームごとに更新されるデータです。React Three Fiber は、そうした状態変化に応じて3D表示を更新する構成と相性が良く、可視化UIをまとめやすいのが強みです。

React の state や hooks とそのままつなげやすい
Three.js の表現力を保ちつつ、React らしく書ける
UIパネル、グラフ、設定画面と同居させやすい
骨格の点、線、補助ガイド、床面、アバターをまとめて扱いやすい

骨格推定側の候補

ブラウザで骨格推定を行う方法はいくつかありますが、入り口としては次の2系統が分かりやすいです。

MediaPipe Pose Landmarker 系
TensorFlow.js の pose-detection API 系

前者は姿勢ランドマークの取得に強く、後者は Web ML の文脈で扱いやすい構成です。どちらもリアルタイム用途に向いており、フォーム分析や簡易モーション可視化の入口として使いやすいです。

全体構成のイメージ

実装は、ざっくり次の4層に分けると整理しやすくなります。

カメラ入力層
骨格推定層
座標変換・平滑化層
3D表示層

Webcam
  ↓
Pose Estimation
  ↓
Keypoints / Landmarks
  ↓
Normalization / Smoothing
  ↓
React State
  ↓
@react-three/fiber で 3D 描画

この分け方にしておくと、推定モデルを差し替えても、3D表示側をほぼそのまま使い回せます。

最初に作るべき最小構成

最初からアバター駆動まで狙うより、まずは「骨格の点と線を3Dで描く」構成にすると実装しやすいです。

動画入力を取得する
各フレームで骨格推定を走らせる
関節点を3D座標へ変換する
各点を sphere で描く
関節同士を line で結ぶ

ここまでできれば、可視化の土台は完成です。その後に、関節角度、トレース、床面との関係、動作区間の色分けなどを足していけます。

実装の考え方

1. 骨格推定結果を React の状態に載せる

骨格推定モデルの出力は、通常はフレームごとのキーポイント配列です。これをそのまま React の state や store に保持します。

const [joints, setJoints] = useState([])

// 推定結果を joints に反映
setJoints(nextJoints)

ただし、毎フレームの state 更新は再レンダリング負荷につながるため、規模が大きくなる場合は useRef や軽量 store の利用も検討します。

2. 2D / 3D 座標を描画用に正規化する

骨格推定の出力は、画像座標系やモデル独自の正規化座標で返ってくることがあります。React Three Fiber 側で使うには、座標系をそろえる必要があります。

左右反転の扱いを決める
原点をどこに置くか決める
スケールをそろえる
Z値の扱いを定義する

ハマりやすい点:
カメラ映像の座標と3D空間の座標は、そのままでは一致しません。ここを曖昧にすると、骨格が左右逆になったり、奥行きの見え方が破綻したりします。

3. 関節点とボーンを描画する

3D表示の初期段階では、各関節を点、関節間のつながりを線として描けば十分です。

{joints.map((joint) => (
  <mesh key={joint.name} position={[joint.x, joint.y, joint.z]}>
    <sphereGeometry args={[0.02, 16, 16]} />
    <meshStandardMaterial />
  </mesh>
))}

線の描画には、あらかじめ「肩から肘」「肘から手首」のような接続定義を持っておくと扱いやすいです。

4. 平滑化を入れる

骨格推定の座標はフレームごとに小さく揺れます。そのまま描画すると、3D骨格も細かく震えて見えます。

移動平均
指数移動平均
信頼度スコアに応じた補間

このあたりを入れるだけで、見た目の安定感がかなり変わります。

どんな用途に向いているか

トレーニングフォームの確認
リハビリや姿勢チェックの可視化
ダンスやスポーツ動作の比較表示
骨格ベースのインタラクション
アバター制御の前段階の検証

特に React ベースで管理画面や解析UIを作っている場合、React Three Fiber を使うと2D UIと3D可視化を同じ技術スタックでまとめられるのが便利です。

よくある課題

パフォーマンス

カメラ処理、骨格推定、3D描画を同時に回すため、CPUやGPUの負荷は上がりやすいです。推定頻度を落とす、描画を軽くする、補助要素を減らすといった調整が必要になります。

座標の整合性

推定モデルの出力座標と3D空間のスケール感がずれると、見た目が不自然になります。腰を原点にする、肩幅基準で正規化するなど、基準を決めておくと扱いやすくなります。

1人推定か複数人推定か

最初は1人だけに絞ったほうが実装はかなり楽です。複数人対応は、IDの追跡や交差時の扱いが一気に難しくなります。

アバター連携

3Dモデルへそのまま適用する段階になると、単なる関節点の描画より難易度が上がります。ボーン構造、回転表現、座標系変換、キャリブレーションが必要になるため、まずは骨格ライン表示で検証するのがおすすめです。

まとめ

React Three Fiber と骨格推定を組み合わせると、ブラウザだけで3Dの動作可視化や姿勢確認ツールを作れます。ReactでUIを管理しながら、Three.jsベースの表現力を使って骨格を立体的に見せられるのが大きな魅力です。

実装の要点は次の通りです。

骨格推定結果を React の状態に流す
座標系とスケールをそろえる
関節点とボーンをまず描く
平滑化で見た目を安定させる
その後に解析やアバター制御へ広げる

動作分析、フォーム確認、姿勢可視化のようなテーマでは、React Three Fiber はかなり相性の良い選択肢です。まずは小さく骨格を描くところから始めると、実装の見通しが立てやすくなります。