Community影像github.com

Teardown

從真實機器的公開發布尺寸,建立一個由物理驅動的即時3D模擬器,包含一個由相同模擬狀態計算每個儀表的儀表板,以及一個裁剪平面剖面視圖。

Teardown 是什麼?

Teardown 是一項技能,用於將真實機械——從引擎和機器人到起落架和渦輪機——轉化為精確、物理驅動的 3D 模擬器。它強制執行嚴格的工作流程:從辨識確切型號開始,編譯一個帶有來源、已發布或估計的 `DATA` 塊,然後使用 Three.js 網格和輔助工具逐個零件重建機器。關鍵在於,一個統一的物理狀態(如曲軸角度或閥門位置)驅動所有運動;每個圖表、儀表和動畫都從這個狀態計算,確保時間上的確定性。該技能支援完整的工程儀表板(轉速表、圖表、零件選擇器)和一個透過裁剪平面實現的剖面視圖。其輸出是一個獨立的 HTML 檔案,可在離線狀態下運行,並需要通過靜止影像進行嚴格檢查,以驗證無錯誤、可視化和確定性。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Felixo-gif/teardown/tree/HEAD/skills/teardown

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Teardown 是做什麼的?

你根據真實數值,逐個零件重建一台真實機器,由一個物理狀態驅動它,並圍繞它建立一個工程儀表板。結果必須呈現為一個真實的模擬器,而不是插圖。絕不省略任何步驟,也絕不憑空捏造一個數字而不標記它。

輸入

  • 機器(最好提到一個命名的真實型號:「Chevrolet 350 small-block」、「Mantis hexapod」、「Airbus A320 main gear」)。
  • 一張真實機器的參考照片。如果使用者附上了一張,就使用它。如果沒有,要求他們提供;如果他們無法提供,請找一張自由授權的照片(Wikimedia Commons,檢查檔案頁面上的授權條款),並記錄作者、授權條款和網址。在建模前觀察照片:比例、零件佈局、顏色以及哪些部分會動。

工作流程(按順序執行)

  1. 辨識。 確定確切的機器和型號。用一行話說明你選擇了哪一種。
  2. 先拿真實數值,一個數據區塊。 在任何幾何建模之前,研究並撰寫 DATA 區塊:所有尺寸、質量、比率、速度、角度和時序,每個都帶有 kind(published、derived、estimated)和一個編號來源。閱讀 references/research.md。規則:優先使用製造商數據表、手冊、標準、論文和記錄機構;可能時交叉驗證兩個來源;你從照片上量出的數字是 estimated;你從其他數字計算出的數字是 derived。在聊天中將這個區塊以短表格形式顯示給使用者,然後再開始建模。
  3. 從套件開始。 將 kit/template.html 複製到輸出資料夾中的 <machine>-live.html,並將 kit/three.js 複製到其旁邊。只編輯 MACHINE:CSS、MACHINE:DASH 和 <script id="machine"> 區塊。套件為你提供了舞台、three.js 設定、簡單軌道控制、剖面視圖、儀表和時鐘。閱讀 references/dashboard.md 以了解 API。
  4. 根據數值建立零件。 每個網格尺寸都來自 N.<key>(數據區塊)或來自程式碼中緊鄰其旁的推導。任何有真實對應物的東西都不能使用魔術數字。匹配照片的比例和零件形狀;使用 kit 輔助工具(TD.span、擠出形狀、TD.glow)。
  5. 一個物理狀態驅動一切。 定義最小的整合狀態(曲軸角度、行走距離、時間、閥門位置)。step() 整合它;derive() 使用真實運動學(references/kinematics.md)從該狀態計算整個機器:位置、角度、速度、力、壓力。pose() 僅將推導值複製到網格上。移動部件上不得使用 Math.sin(time) 裝飾。
  6. 儀表板圍繞相同的狀態建構。 每個讀數、圖表、條形圖和指示器都從推導出的物件 S 讀取,而不是從其自己的計時器讀取。跨越一個週期的圖表透過在採樣相位呼叫相同的求解器來計算。包括:頭條數字、當前相位/衝程標籤、至少一個與角度或相位相關的圖表並帶有移動游標、一個按零件選擇器、帶有來源的數據區塊、帶有出處的參考照片,以及控制項。佈局和儀表選擇:references/dashboard.md。
  7. 剖面視圖。 添加裁剪平面剖面視圖(TD.cutaway),穿過隱藏動作的零件,使外殼空心化,這樣只有牆壁截面顯示蓋帽顏色,將前方的部分設為半透明,並使隱藏的動作可見(燃燒閃光、油柱、齒輪嚙合)。references/cutaway.md。
  8. 外觀。 套用 references/look.md(預設為暗色科幻風格,可應要求改為淺色工程風格)。
  9. 透過渲染靜止影像進行自我檢查。 執行 node kit/stills.mjs <abs html> 0.5,2,4 <abs dir>/check-%.png(需要 playwright;否則在瀏覽器工具中打開頁面並呼叫 __render)。閱讀每個 PNG。修正直到:無控制台錯誤、機器在畫面內且清晰、剖面視圖顯示內部、儀表在不同靜止影像之間有明顯差異(腳本會標記完全相同的儀表板),以及 deterministic: yes。然後執行 references/qa.md。刪除檢查用的 PNG。
  10. 發布。 執行 node kit/inline.mjs <machine>-live.html,將 three.js 和圖片合併到 <machine>-live.standalone.html 中,這是一個單一的離線檔案。回覆包含:檔案、數據區塊(數字 + 來源)、照片出處,以及哪些是估計值而非公開發布值。

輸出檔案的嚴格約定

  • 從磁碟開啟,無須網路;three.js 是一個經典腳本,暴露 window.THREE(無 ES 模組,無 CDN)。
  • window.__render(t):t 以秒為單位,確定性,不依賴真實時間;它將控制項重設為預設值,從 0 開始以固定步長重新整合狀態,並繪製一個畫面。套件的 TD.run 為你處理這件事;不要繞過它。
  • 在正常開啟時使用 requestAnimationFrame 即時播放;控制項改變狀態,每個儀表都會跟隨。
  • 桌面舞台 1600x1000,按比例縮放以適應任何視窗。
  • 數據區塊、來源和照片出處必須在頁面中可見。

誠實規則

  • 絕不將估計數字呈現為公開發布值。必須標記。
  • 如果公開發布值不一致,選擇一個,在備註中顯示另一個,並說明。
  • 如果某個行為被簡單建模(靜態負載、理想氣體、無摩擦),在回覆中用一行話說明。

相關技能