Communitygithub.com

ティアダウンシミュレーター

あらゆる機械やメカニズム(実在・架空問わず)を、分解可能なインタラクティブな3Dシミュレーター(オフラインの単一HTMLページ)に変換します。カットアウェイ、爆発図、「○○の仕組み」解説、運転可能モデル、またはスコア付き録画映像を生成します。

ティアダウンシミュレーター とは?

このスキルは、あらゆる機械やメカニズム(実在または架空)を、オフラインで動作する単一HTMLページの3Dインタラクティブシミュレーターに変換するための包括的なワークフローを提供します。ユーザーは、「自転車のディレイラー」「腕時計の脱進機」「車のデファレンシャル」などの実機を題材に、コードベースで実寸のモデルを構築し、1つの入力パラメータ(クランク角度、ストローク、風速、時間など)に対する純粋関数として動作するソルバーを実装します。Claude Code上で動作し、モデルの構築、ライブグラフやボタンによるコンソール配置、美的スタイリング、自動衝突チェック(批評パス)、自動ツアー、60fpsでの映像録画とスコアリング(音楽付き)、そしてオプションの公開(1MB未満のHTML)までの全工程を、対話形式のプロンプトで段階的に実行します。このスキルは特に、機械の分解や動作原理の可視化に優れており、数値はすべて実データに基づくか推定値として明示されるため、精度と透明性が重視されます。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/script-repo/3d-studio/tree/HEAD/skills/teardown-simulator

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ティアダウンシミュレーター は何をしますか?

1台の機械、1つのオフラインHTMLページ:コードで構築された実寸モデル、1つの入力に対する純粋関数としてのソルバー、ライブパネル、サブシステムごとのボタン、自動ツアー、批評パス、スコア付き60fps録画映像、オプションの公開ステップ。

ルール

  • まずは参考資料。 構築前に、カットアウェイ図、写真、またはクリップを入手または探してください。参考資料なしでは構築しません。
  • 数値を黙ってでっち上げない。 すべての数値は出典を示すか、推定値であることを明記し、その根拠を添えます。
  • 最初にスコープを確認。 重い構築はClaude Codeの使用量が多くなります。機械、ビート、映像の有無について合意してください。
  • 公開には毎回明示的な承認が必要です。
  • ホスト上では:ユーザーレベルのみ、sudo禁止、クラスターサービスに触れない、長時間レンダリングはtmuxとログを使用。

適した機械を選ぶ

1つの動く入力(クランク角度、ストローク0..1、風、時間)と、公開された実測値があるもの。良い例:自転車ディレイラー、時計脱進機(4Hz)、車のデファレンシャル、ミシンの本縫い、油圧ショベルのアーム。独立した入力が多い機械や、非公開の寸法がある機械は避けてください。

シミュレーターの構成

  1. 機械 — コードで実寸で構築。 2. モデル — 1つのソルバー、1つの入力の純粋関数。 3. パネル — 同じモデルからのライブチャート。 4. ボタン — サブシステムごとに分離/切断/単独表示、ビュー、スライダー。 5. ウィンドウ — 床/ステージはソルバーの出力を表示。 6. ツアー — 自動カーソルツアー。入力を操作すると制御をユーザーに委譲。25秒間操作がないと自動的に制御を取り戻す。

インストールと実行(<ホスト>上で)

npx skills add elvarofficial/teardown -g -a claude-code
cd ~/.claude/skills/teardown && npm install && npx playwright install chromium
# 必要なもの:Node >= 20、ffmpeg、python3
mkdir -p ~/3d-studio/{projects,out,logs,smoke}
cd ~/3d-studio/projects/<機械名>
tmux new -s <機械名> 'claude 2>&1 | tee ~/3d-studio/logs/<機械名>.log'
# Claude Code内で:/teardown ...   (決して --dangerously-skip-permissions を使わないこと)

スモークテスト:node ~/.claude/skills/teardown/sims/build.mjs cessna-live を実行し、teardown-out/dist/ にあるHTMLファイルを開きます。

ワークフロー([ブラケット]内を置き換えてください)

0. ブリーフィング

templates/brief.mdを記入(参考資料、単一入力、実測値、部品)し、スコープを確認します。

1. 構築

/teardown Build [セスナ337のメイン着陸装置] をインタラクティブな3Dシミュレーターとして。参考資料添付:[着陸装置のカットアウェイ図]。コードで実寸で構築:[部品]。何かを描く前に、モデルを1つの入力の純粋関数として記述:[ストローク0から1]。実測値を使用:[ラックは201mm移動、ピニオンはモジュール4mmで32枚、脚は正確に180°回転]。手動で検算し、その結果を見せてください。数値が実測値かどうか確信が持てない場合は、その旨とその数値の出典を述べてください。すべての部品、すべてのパネル、すべてのラベルは、その1つのモデルからデータを読み取ります。手動でアニメーション化されるものはありません。

2. コンソール

機械の周りに1600×900のコンソールを配置:左上に大きくタイトルと主要なライブ数値:[エンジン回転数(rpm)]。機械に連動するライブチャート:[クランク角720°にわたるバルブリフト、PV線図]。同じモデルからメカニズムを2Dで再描画する模式図パネル。サブシステムごとに1つのボタン:分離、切断、単独表示。カメラビューをボタンで:[ヒーロー、正面、側面、上面、内部]。細い引出し線付きのコールアウト。すべてのパネルはフレームの状態から再描画されます。画面上の数値はすべてモデルから動的に取得され、手入力されたものはありません。

3. ルック

スタイル:薄いスタジオ上のクリーンなスタディモデル。明るい背景、透明な床に柔らかい影、現在動作している部品に1つのアクセントカラー:[アクセントカラー]。機械はビューの60~70%を占めます。暗い部品は光沢、ライナーはガラス、金属の粗さは少なくとも0.45。ほぼ白の部品には細いインクの輪郭線または濃い色のグラウンドカラー。メカニズムに合わせてカメラを選択:[3/4ビュー]。真正面から見ると格子状になる場合は使用しないでください。

4. 批評

何かを表示する前に:1. ツアーの各ビートで静止画をレンダリングし、それぞれを確認:部品が他の部品を貫通していないか、部品がマウントから浮いていないか、ラベルが示す対象物を隠していないか、数値がポーズと矛盾していないか。2. すべての遷移を0.2秒ステップでスクラブし、ジャンプがないか確認。3. 衝突はパラメータブロック内の数値で修正し、カメラで隠さない。何を確認し、何を修正したかを報告。静止画を見せてください。

5. ドライブ

ツアーは自動的に実行され、カーソルがボタンを押します:[ツアービート]。クリック、ドラッグ、スクロール、またはキー操作があると、制御は訪問者に委譲されます。25秒間操作がないと、再び自動制御に戻ります。ドラッグで軌道移動、スクロールでズーム、[キー]でパネルを非表示。最初のフレームの前にすべてのシェーダーをウォームアップ。統合GPUでテストし、品質段階を設定:AOなし、ピクセル比低減、小さいシャドウ、パネルは1フレームおきに更新。

6. 録画

render(t) を [20秒間] の時間の純粋関数にします。すべてのフレームを60fps、1920×1080でヘッドレスChromeに描画し、ffmpegにパイプしてH.264 yuv420p、faststart付きで出力。すべてのビートのコンタクトシートを提供。

7. スコアリング

同じタイムライン上でコードでスコアリング:[Am9コード、92bpm、パワーストロークごとにドン、ボタン押下ごとにクリック、スロットルドラッグ時に立ち上がる空気音]。 -14 LUFSにマスタリング、トゥルーピーク-1dB未満、映像に多重化。

8. 公開

HTMLを1MB未満に抑える(大規模モデルは兄弟ファイルに配置)。最高のフレームから1200×630のプレビューカードを作成し、絶対画像URLを使用。私が「はい」と言った後にのみ[Vercel / ホスト]にデプロイ。

9. 壊してみる(ボーナス)

[風速0~15m/s]のスライダーを1つ追加し、モデルをリアルタイムで実行。同じパネルにその効果を表示。

教訓

  • ページを1MB未満に保つ:15.9MBのページではXのリンクカードが機能しませんでしたが、967KBで修正されました。
  • 統合GPU:品質段階(AOなし、ピクセル比低減、小さいシャドウ、パネルは1フレームおき)により、15fpsから75fpsに向上した事例があります。
  • 静止画は動きでは見逃しがちな衝突を捉えます。常に批評パスを実行してください。
  • 衝突はパラメータブロック内の数値で修正し、カメラで隠さないでください。

成果物

フォルダ内容:<機械名>.html(オフライン、1MB未満)、批評レポート(templates/critic-report.md)静止画付き、コンタクトシート、<機械名>.mp4(60fps、-14 LUFS)、数値の出典とフラグを含む手動検算結果、公開する場合はプレビューカード。

クレジット

ワークフローとプロンプト:Elvar(@elvar_official)、「How I Turn Any Machine Into a 3D Simulator You Can Take Apart」(X、2026-10-30)。Elvarのティアダウンスキル(github.com/elvarofficial/teardown、MITライセンス)を実行。whaleyxbt/claude-motion(MITライセンス)をベースに構築。

関連スキル