Tricking 3D Analyzer

▶ Open App

トリッキング/パルクールの 192 技を Three.js で 3D 表示し、タイムラインスクラブ・回転軸表示・重心軌跡可視化・キーポイント注釈などで動きを細かく分析できる Web アプリ。

参考: pt-village.com/tricking

起動

npm install
npm run dev          # http://localhost:5173 が自動で開きます

ビルド & プレビュー:

npm run build
npm run preview

操作

• 左サイドバー: 192 技をカテゴリ別（キック/フリップ/ツイスト/トランジション）から選択。検索可（ひらがな・カタカナ・英語・全角半角を区別しない）。選んだ技は URL（例: #side-flip）に残るので、再読み込みや共有でも同じ技が開く。
• スマホ幅: 3D ビューの下にタイムラインと「技一覧 / 解説・キーポイント」のタブ。
• 下部タイムライン:
  • ▶/⏸ 再生・停止
  • |◀ ▶| 1/30 秒コマ送り
  • キーボード: Space 再生・停止 / ← → 1コマ戻る・進む
  • シークバーで任意フレームへ移動（自動で停止）
  • 0.1× / 0.25× / 0.5× / 1× / 1.5× / 2× の再生速度
• 右上カメラ切替: 正面 / 側面 / 真上 / 自由（どの視点でもドラッグすると自由視点に切り替わる）。側転やライズのように移動する技では、カメラが体の動きをなめらかに追って画面内に保つ（その場で行う技は従来どおり固定）。OS で「視差効果を減らす」（prefers-reduced-motion）を有効にしている場合は再生中にカメラを動かさず、移動範囲全体が入る位置に固定する。
• 左下オーバーレイ:
  • 軸表示（赤=主回転軸、シアン=捻り軸）
  • 重心軌跡（黄色いライン、hips の軌跡）
  • 注釈（キーポイントラベル、クリックで該当時刻へシーク）。ラベルは重ならないよう画面上で自動配置し、元の位置へ引き出し線を引く。画面上のボタン類とも重ならない
  • スマホなど狭い画面でラベルが人体を隠すほど多いときは、再生位置にいちばん近いキーポイントのラベルだけを大きめに表示し、残りは番号付きの丸印にまとめる（丸印をタップするとその時刻へ移動してラベルが開く）。ラベルと丸印は空きがあれば人体を避けて置く。PC の表示は従来どおり全ラベル
• 右パネル: 技名・カテゴリ・踏切足・軸情報・解説テキスト・キーポイント一覧（クリックでシーク）。その下の「技のつながり」に、先に覚える技（Loopkicks が前提技に挙げる技）と、この技を前提にする次の技を並べ、押すとその技に切り替わる。ブラウザの戻るで元の技に戻れる。

キャラクターモデル（任意）

デフォルトでは Mixamo 互換ボーン階層を持つ手続き型ヒューマノイド（カプセルボディ）が表示されます。リアルなスキンメッシュに差し替えたい場合は次の手順:

1. https://www.mixamo.com にログイン
2. X-Bot または Y-Bot を選択
3. アニメーションを付けずに T-pose のまま Download →
   • Format: GLB
   • Pose: T-pose
4. 取得した .glb を public/models/character.glb に配置

ボーン名（mixamorigHips, mixamorigSpine, …, mixamorigLeftFoot 等）は手続き型と同じなので、配置するだけでスキンメッシュに切り替わります。ファイルの有無はビルド時（開発サーバーは起動時）に確認し、置いていないときはモデルを読みに行きません（本番で毎回 404 にならない）。

技の選び方と左右の約束

• 元の 20 技は Loopkicks Tricktionary の 20 ファミリー（ポップ/チート/スイング、バク宙/ゲイナー/フル/コーク、前宙/ウェブスター/ジャニター、バタフライ/エアリアル/マスタースイング/ラップ/タック、ライズ/ダブルレッグ/スパイダー/ロータス/サイドフリップ）をそれぞれ代表技で示したもの。そこに 540・チート720・フラッシュキック・ゲイナーフラッシュ・バタフライツイスト・側転・スクートを足して 27 技、さらに進行ツリーの隙間を埋める チート900・バックサイド720・バックサイド900・ゲイナースイッチ・コークスクリュースワイプ・ルーザー・タッチダウンライズ・サイドスワイプ を足して 35 技、Loopkicks で前提技・次の一歩として挙がっている ポップトルネード・ポップ540・スイング900・アラビアン・コークスクリューハイパー・エアリアルツイスト・ガンビー・セーラームーン を足して 43 技、同じく前提技・次の一歩として挙がっている トルネードサイドキック・ポップ720・エックスアウト・ゲイナーアラビアン・フロントハーフ・片手側転・ロンダート・ダブルレッグツイスト を足して 51 技、さらに バックサイド900ハイパー・バックパイク・フロントエックスアウト・ウェブスターハーフ・バタフライキックスイッチ・スクートハイパー・セーラームーンラウンド・スパイダーツイスト を足して 59 技、さらに チート900サイドキック・ゲイナーエックスアウト・コークスクリューラウンド・フロントパイク・ウェブスターエックスアウト・バタフライツイストラウンド・サイドフリップラウンド・ダブルサイドフリップ を足して 67 技、さらに トルネードダブル・チートフェイロン・バックサイド900サイドキック・フルラウンド・フロントアックス・ジャニターツイスト・ラップフルラウンド・ダブルレッグツイストラウンド を足して 75 技、さらに チート900ハイパー・スイング1080・フルハイパー・アラビアンエックスアウト・ウェブスターアックス・バタフライツイストハイパー・ダブルレッグエックスアウト・ダブルレッグサイドキック を足して 83 技、さらに チート900ダブル・タックフルラウンド・アラビアンハーフ・エックスアウトフル・フルスワイプ・バタフライツイストスワイプ・スパイダーツイストラウンド・ラップフルハイパー を足して 91 技、さらに チート900フェイロン・ポップ360ジャイロ・アラビアンアックス・ゲイナースイッチハーフ・タックフルスワイプ・ラップフルスワイプ・バタフライツイストアックス・セーラームーンダブルレッグ を足して 99 技、さらに トルネードホークアイ・540ジャイロ・チート720ダブル・フルダウン・ゲイナーシザー・ダブルバタフライツイスト・バタフライツイストダブルレッグ・セーラームーンダブルレッグツイスト を足して 107 技、さらに ポップ360シュリケン・チート900ジャイロ・ポップ900・アラビアンシザー・ジャニターシザーツイスト・バタフライキックシザー・バタフライツイストホークアイ・チート720ツイスト を足して 115 技、さらに チート720シュリケン・ポップフェイロン・ポップ720ダブル・バックサイド900ジャイロ・フルレイトラウンド・フルシザー・セーラームーンツイスト・セーラームーンハイパーフック を足して 123 技、さらに ポップ900ハイパー・チート900ダブルハイパー・ポップ360ジャイロラウンド・ライズハイパーフック・ダブルバタフライツイストハイパー・トリプルバタフライツイスト・ダブルフル・フルダブルレッグ を足して 131 技、さらに フルハイパーフック・フルシュリケン・アラビアンシザーハーフ・バタフライツイストダブルラウンド・バタフライツイストハイパーフック・ダブルバタフライツイストラウンド・セーラームーンホークアイ・チート720ツイストラウンド を足して 139 技、さらに バックサイド1080・ポップ1080・スイング1260・トリプルフル・ダブルフルラウンド・ダブルフルハイパーフック・バタフライツイストシュリケン・ゲイナーシザースワイプ を足して 147 技、さらに ダブルフルスワイプ・ダブルフルダブルレッグ・トリプルフルハイパー・ラップダブルフル・タックダブルフル・キックフル・ダブルアラビアン・ダブルエアリアルツイスト を足して 155 技、さらに トリプルフルラウンド・トリプルフルハイパーフック・クアッドフル・キックダブルフル・タックダブルフルハイパー・タックダブルフルラウンド・コークスクリューシュリケン・トリプルエアリアルツイスト を足して 163 技、さらに多くの技の前提になる技と、その続きとして スキップフック・ジャックナイフ・ワックナイフ・パラフーゾ・チート1080・バックサイド1260・ダブルバックタック・ゲイナーフック・ロデオフル・フルスナプ・ボックスカッター・コークスクリューダブルレッグ・ドラゴンフライコークスクリュー・ダブルコークスクリュー・トリプルコークスクリュー・タックフルハイパーフック・ラップフルハイパーフック・スナプ・ロータスダブルレッグ・ロータスシュリケン・ロータスダブルレッグハイパーフック を足して 184 技、さらに チート1260・チート900ダブルレッグ・バックサイド1440・フルワックナイフ・シュリケンカッター・コークスクリュースワイプナイフ・コークスクリュースナプ・ロデオコークスクリュー を足して 192 技。
• すべて 左回り（反時計回り・左ひねり）の人 を基準にモデル化している。右足がインサイド（回し蹴り）、左足がアウトサイド（フック）、チート踏切は右足、ひねりは左。右回りの人は左右を読み替える。
• 用語は Loopkicks Tricktionary（https://www.loopkickstricking.com/tricktionary/）に合わせ、着地はコンプリート／ハイパーの慣例（左回りの人なら、アウトサイドの左足で着地＝コンプリート、インサイドの右足で着地＝ハイパー）に従う。

設計メモ

• 技ごとのアニメーションはコードで合成（THREE.AnimationClip）。
  • 縦回転の基本技（バク宙・前宙・サイドフリップ・ゲイナー・フル・コーク・ウェブスター）は src/tricks/animations/index.ts の Builder DSL（src/tricks/authoring.ts）による手付けキー。
  • それ以外は src/tricks/rig.ts のセマンティックリグ（腰の heading/pitch/roll/twist、脚の方位・挙上・膝、腕など）で kicks.ts / inside.ts / outside.ts / flips.ts に記述。リグは単調3次補間で密にサンプリングし、ピン止めした足（手）を軸に腰を解き、空中は放物線、接地中は最下点が床に着くように腰の高さを決める。
  • src/tricks/animations/plausibility.test.ts が全技について「足が床を貫かない」「踏切足・着地足がカタログと一致する」ことを実機のリグで検証する。手をつく・接地・踏切を表すキーポイントが、クリップの中で実際にその接触が起きるフレーム（正規化時間で ±0.02 以内）に置かれていることも検証する。
• 技のメタデータ（名前・カテゴリ・回転軸・踏切足・着地足・キーポイント）は src/tricks/catalog.ts。
• 解析オーバーレイは src/analysis/（軸矢印、重心ライン、ラベルスプライト）。ラベルの重なり回避は src/lib/labelLayout.ts（画面座標で、アンカーまわりの格子から空いているセルを選ぶ。混み具合の判定 isCrowded、残すラベルの選択 focusKeypoint、人体を避ける avoid もここ）。
• カメラ追従は src/lib/follow.ts。重心ラインと同じ腰の軌跡をガウス平滑化して、再生時刻だけで決まるオフセットにする（シークやコマ送りでも同じ構図）。腰が開始位置から 0.6 m 以内に収まる技は追従しない。
• UI は素の DOM + CSS で src/ui/ に分離。

ホスティング

本番は Cloudflare Workers (static assets): https://tricking-3d.saitotakuya0719.workers.dev

2026-08-11、Vercel 無料枠の超過でアカウントが停止（全プロジェクトが 402 DEPLOYMENT_DISABLED）したため移行した。wrangler.jsonc の assets だけで 配信し、セキュリティヘッダーは public/_headers（Vercel 時代の vercel.json の headers を移植したもの。vercel.json は移行後に削除済み）。npm run deploy で build + wrangler deploy。