kritsana.devpassing
runartifactsdocsworkhistorydispatch

© 2026 Kritsana Prasit — built from source on a self-hosted runner

resume.pdfrssdispatch

back to artifacts
category: developer toolsdate: 12 Nov 2026read: 3 min readsource: posts/teardown-3d-simulator-skill.mdx

รู้จัก Teardown: เปลี่ยนเครื่องจักรซับซ้อนให้เป็น 3D Simulator ในหน้าเดียวด้วย Claude Code

เจาะลึก elvarofficial/teardown สกิลของ Claude Code ที่เปลี่ยนคำอธิบายกลไกเครื่องจักร ให้กลายเป็นเว็บ 3D แบบโต้ตอบได้ พร้อมเรนเดอร์วิดีโอ 60 fps และเสียงประกอบอัตโนมัติ

รู้จัก Teardown: เปลี่ยนเครื่องจักรซับซ้อนให้เป็น 3D Simulator ในหน้าเดียวด้วย Claude Code

เคยไหมเวลาอยากเข้าใจว่าเครื่องยนต์ V8 นาฬิกาจักรกล หรือกลไกพับล้อเครื่องบินทำงานอย่างไร พอไปอ่านบทความเจอแต่ข้อความยาวๆ ก็นึกภาพตามไม่ออก พอไปดูวิดีโอ 3D ก็กดหยุดหมุนดูมุมที่สงสัยเองไม่ได้

elvarofficial/teardown เข้ามาแก้ปัญหานี้ด้วยการเป็น Claude Code Skill ที่เปลี่ยนคำถามสั้นๆ อย่าง "สิ่งนี้ทำงานอย่างไร?" ให้กลายเป็น 3D Simulator แบบโต้ตอบได้ในไฟล์ HTML เพียงไฟล์เดียว ที่เปิดดูแบบออฟไลน์ได้ทันที หรือจะสั่งเรนเดอร์ออกเป็นวิดีโอ 60 fps พร้อมเสียงประกอบก็ทำได้ในตัว

ตัวอย่าง 3D Simulator หุ่นยนต์ผึ้ง Mellis HB-7 ในโหมด Exploded View พร้อมแผงข้อมูล Telemetry รอบหน้าจอ

ตัวอย่างหน้าจอ Mellis HB-7 Robotic Bee Simulator ที่แยกชิ้นส่วน (Exploded View) พร้อมแสดงค่าความถี่การกระพริบปีกและพลังงานแบบเรียลไทม์

Teardown ทำอะไรได้บ้าง?

แนวคิดหลักของ Teardown คือ "One Machine, One Page" (หนึ่งเครื่องจักร อยู่ในหน้าเดียว) เมื่อเราสั่งให้ Claude สร้างโมเดลจำลอง ผลลัพธ์ที่ได้ไม่ใช่แค่ภาพ 3D หมุนไปมา แต่เป็นห้องทดลองขนาดย่อมที่มีครบ 4 ส่วน:

  1. โมเดล 3D ที่ขยับตามฟิสิกส์จริง — เครื่องจักรทำงานอยู่กลางหน้าจอ หมุนซูมดูได้รอบทิศทาง
  2. โหมดผ่าดูภายใน (Cutaway & Isolate) — มีปุ่มกดเพื่อเปิดฝาครอบ ทำชิ้นส่วนให้โปร่งใสแบบกระจก (Glass/X-ray) หรือแยกดูเฉพาะกลไกส่วนที่กำลังออกแรงทำงาน
  3. หน้าปัดและกราฟข้อมูลสด (Live Telemetry) — แผงข้อมูลรอบหน้าจอแสดงตัวเลขและกราฟที่คำนวณจากสมการเดียวกับตัวโมเดล 3D ค่าที่เห็นจึงตรงกับจังหวะการขยับของชิ้นส่วนเสมอ
  4. ระบบนำชมอัตโนมัติ (Auto-Tour) — ถ้าเปิดหน้าเว็บทิ้งไว้เฉยๆ จะมีเคอร์เซอร์จำลองพาคลิกปุ่มเปลี่ยนมุมกล้องและผ่าดูชิ้นส่วนสำคัญให้เอง แต่ทันทีที่เราขยับเมาส์หรือกดปุ่ม ระบบจะส่งการควบคุมให้เราเล่นต่อทันที (และกลับเข้าโหมดนำชมเมื่อหยุดนิ่งครบ 25 วินาที)

ตัวอย่าง Simulator หุ่นยนต์แมงป่อง Telson SC-8 แยกดูเฉพาะกลไกก้ามหนีบด้านซ้าย

โหมด Isolate ใน Telson SC-8 ที่เจาะดูชุดเฟืองและแรงบีบของก้ามหนีบ (Claw Grip) พร้อมกราฟแรงดันสด

เบื้องหลังความเป๊ะ: ทำไมโมเดลของ Teardown ถึงไม่ดูมั่ว?

ปัญหาคลาสสิกของการให้ AI เขียนโค้ด 3D คือชิ้นส่วนมักจะลอยทะลุกัน หรือกราฟกับตัวโมเดลขยับไม่ตรงจังหวะกัน Teardown จึงวางสถาปัตยกรรมและกฎเหล็กไว้ใน SKILL.md เพื่อบังคับให้ AI ทำงานเหมือนวิศวกรจริงๆ

1. แยกสมการคณิตศาสตร์ออกจากกราฟิก 3D เด็ดขาด

โครงสร้างไฟล์ของเครื่องจักรแต่ละชิ้นจะถูกแบ่งหน้าที่ชัดเจน:

  • kin.js / gear.js (สมองกลไก): เก็บขนาดจริงตามสเปกวิศวกรรม (เช่น ระยะชักเป็นมิลลิเมตร จำนวนซี่เฟือง ความยาวก้านต่อ) แล้วคำนวณตำแหน่งทุกจุดจาก ตัวแปรต้นเพียงตัวเดียว (เช่น มุมข้อเหวี่ยง หรือแรงลม) ไฟล์นี้ห้ามมีโค้ด Three.js ปนอยู่เลย
  • engine.js + stage.js (ตัวหุ่นและฉาก): นำค่าที่ได้จากสมการมาสร้างและขยับรูปทรง 3D จัดไฟ เงา และเอฟเฟกต์
  • console.js (แผงหน้าปัด): นำค่าชุดเดียวกันมาวาดกราฟ ตัวเลข และเส้นชี้บอกชื่อชิ้นส่วน (Callout leaders)

พอทุกส่วนอ่านค่าจากสมการต้นทางเดียวกัน โมเดล 3D กราฟหน้าจอ และเสียงประกอบจึงไม่มีวันเพี้ยนออกจากกัน

2. ฟังก์ชัน render(t) ที่คาดเดาได้ 100%

ในโหมดอัดวิดีโอ (film.js) การวาดภาพแต่ละเฟรมถูกเขียนเป็น Pure Function ที่ขึ้นอยู่กับเวลา t เท่านั้น ห้ามสุ่มค่าสดๆ ด้วย Math.random() และห้ามเก็บสถานะค้างข้ามเฟรม ทำให้ระบบสามารถกระโดดไปเรนเดอร์ภาพที่วินาทีใดก็ได้โดยได้ภาพเดิมเป๊ะทุกครั้ง

3. ระบบตรวจงานตัวเองของ AI (Visual Review Loop)

เพราะโมเดลภาษาไม่ได้นั่งดูวิดีโอเหมือนมนุษย์ Teardown จึงสร้างสคริปต์ให้ AI แคปภาพทุกจังหวะสำคัญออกมาเรียงต่อกันเป็นแผ่นภาพ (Contact Sheet) แล้วให้ AI ตรวจเช็กรายการต่อไปนี้ด้วยตัวเองก่อนส่งงาน:

  • กลไก: ชิ้นส่วนที่ต้องสัมผัสกันแตะกันจริงไหม? มีชิ้นไหนทะลุกันหรือเปล่า?
  • การจัดวาง: ป้ายชื่อทับชิ้นส่วนไหม? มีข้อความตกขอบจอหรือเปล่า?
  • แสงและวัสดุ: แสงสะท้อน (Bloom) จ้าจนกลืนรายละเอียดไหม? สีชิ้นส่วนกลืนกับพื้นหลังหรือเปล่า?

หากตรวจเจอจุดผิดพลาด AI จะกลับไปแก้ตัวเลขในโค้ด แล้วเรนเดอร์แผ่นภาพออกมาตรวจซ้ำจนกว่าจะผ่านครบทุกข้อ

ตัวอย่าง Simulator หุ่นยนต์หมึกยักษ์ Pelagos OC-8 เปิดฝาครอบส่วนหัวให้เห็นชุดปั๊มขับเคลื่อนด้านใน

Pelagos OC-8 เมื่อกดเปิดฝาครอบ (Mantle Open) เพื่อดูระบบปั๊มแรงดันน้ำด้านใน

4. สร้างเสียงประกอบจากโค้ด Python (sfx/)

แทนที่จะใช้ไฟล์เพลงสำเร็จรูปมาตัดแปะ Teardown ใช้ Python สังเคราะห์เสียงประกอบ (Procedural Sound) โดยอ่านจังหวะเวลาจากไฟล์ timeline.json เดียวกับตัววิดีโอ เสียงจังหวะลูกสูบระเบิด เสียงมอเตอร์หมุน หรือเสียงคลิกเปลี่ยนโหมดจึงตรงกับภาพระดับมิลลิวินาที พร้อมปรับความดังมาตรฐาน (-14 LUFS) ให้โดยอัตโนมัติ

ตัวอย่างเครื่องจักรที่มีมาให้ลองใน Repo

ในโปรเจกต์มีตัวอย่างสำเร็จรูป 3 ชิ้นที่แสดงศักยภาพของระบบไว้อย่างชัดเจน:

  • v8-* (เครื่องยนต์ Cross-plane V8): กระบอกสูบทำจากแก้วใสให้เห็นจังหวะจุดระเบิดตามลำดับ 1-8-4-3-6-5-7-2 วาล์วเปิด-ปิดตามเพลาลูกเบี้ยว พร้อมกราฟแรงดันในห้องเผาไหม้ที่วิ่งตามองศาข้อเหวี่ยงจริง
  • cessna-* (ชุดล้อเครื่องบิน Cessna 337): จำลองกลไกพับเก็บล้อเข้าลำตัวเครื่องบินด้วยเฟืองสะพาน (Rack & Pinion) ระยะชัก 201 มม. ขับเฟือง 32 ซี่ให้หมุนพับล้อ 180 องศาพอดี
  • strandbeest-* (สัตว์เดินชายหาดของ Theo Jansen): กลไกขาเดิน 20 ข้างบนเพลาข้อเหวี่ยงเดียว ขับเคลื่อนด้วยแรงลม คำนวณจุดหมุนด้วยวิธีตัดวงกลมจากความยาวก้านทั้ง 11 ชิ้นตามสูตรต้นฉบับของ Jansen

วิธีติดตั้งและเริ่มใช้งาน

สิ่งที่ต้องมีในเครื่องคือ Node.js 20+ (และหากต้องการเรนเดอร์วิดีโอพร้อมเสียง ต้องมี ffmpeg กับ Python 3 เพิ่มเติม)

1. ติดตั้ง Skill เข้าสู่ Claude Code:

bash
npx skills add elvarofficial/teardown -g -a claude-code

2. ติดตั้งแพ็กเกจและ Chromium (ทำครั้งเดียวในโฟลเดอร์ของสกิล):

bash
npm install && npx playwright install chromium

3. ลองสั่งงาน Claude Code ด้วยประโยคธรรมดา:

text
Build me a simulator of a 4-stroke motorcycle engine I can take apart.

หรือ

text
Make a teardown of a hydraulic excavator arm and record a 20-second video of it.

หากอยากลองเปิดดูตัวอย่างที่มีอยู่แล้ว สามารถรันคำสั่ง build เพื่อสร้างไฟล์ HTML เดี่ยวๆ (ขนาดประมาณ 800 KB ที่รวม Three.js และฟอนต์ไว้ข้างในเรียบร้อย) ได้ทันที:

bash
node sims/build.mjs v8-live
node sims/build.mjs cessna-live
node sims/build.mjs strandbeest-live

ไฟล์ที่ได้จะถูกเก็บไว้ที่ teardown-out/dist/ ซึ่งเราสามารถดับเบิลคลิกเปิดในเบราว์เซอร์ หรือส่งต่อให้คนอื่นเปิดดูได้โดยไม่ต้องพึ่งอินเทอร์เน็ตหรือรันเซิร์ฟเวอร์ใดๆ

สรุป

Teardown ไม่ได้เป็นแค่เทมเพลตทำภาพ 3D แต่เป็นตัวอย่างของการออกแบบ Agent Skill ที่ครบวงจร ตั้งแต่วิธีคิดเชิงวิศวกรรม การแยกโครงสร้างโค้ด ระบบเรนเดอร์ภาพและเสียง ไปจนถึงขั้นตอนให้ AI ตรวจคุณภาพงานตัวเอง ใครที่ต้องทำสื่อการสอน อธิบายระบบวิศวกรรม หรืออยากเห็นว่า Claude Code สร้างชิ้นงาน Interactive ระดับโปรดักชันได้อย่างไร Repo นี้คือหนึ่งในตัวอย่างที่ควรลองเปิดศึกษาดูสักครั้ง

contents

  • Teardown ทำอะไรได้บ้าง?
  • เบื้องหลังความเป๊ะ: ทำไมโมเดลของ Teardown ถึงไม่ดูมั่ว?
  • 1. แยกสมการคณิตศาสตร์ออกจากกราฟิก 3D เด็ดขาด
  • 2. ฟังก์ชัน `render(t)` ที่คาดเดาได้ 100%
  • 3. ระบบตรวจงานตัวเองของ AI (Visual Review Loop)
  • 4. สร้างเสียงประกอบจากโค้ด Python (`sfx/`)
  • ตัวอย่างเครื่องจักรที่มีมาให้ลองใน Repo
  • วิธีติดตั้งและเริ่มใช้งาน
  • สรุป

related documents

developer tools · 3

  • A2UI 1.0: โปรโตคอลเปิดที่ทำให้ AI Agent ส่ง UI มาให้แอปเรนเดอร์เองได้

    13 Nov 2026 · 3 min read

  • Agent Skills กลายเป็นมาตรฐานกลางแล้ว: เขียน Skill ครั้งเดียว ใช้ได้ทุก Agent

    13 Nov 2026 · 5 min read

  • สรุป 4 เครื่องมือ AI Agents & Dev Tools ที่มาแรงวันนี้: จาก Modern Web Guidance ถึง Gemini Decisions API

    12 Nov 2026 · 4 min read

comments