ใช้ AI สร้าง Interactive 3D (แกล้งๆเป็น Tony Stark)
Steps🤓❤️🔥
- เปิด Google AI Studio (aistudio.google.com)
- เลือก Gemini 3 Pro Preview
- วาง Prompt: Create a real-time interactive 3D particle system with Three.js. Integrate MediaPipe Hands for webcam tracking. Particles should diffuse and wander freely when my hand is open, then rapidly converge and cluster together when I close my hand into a fist.
- คัดลอก Code เก็บไว้
- สร้างไฟล์ใหม่ วาง Code ลงไป แล้วบันทึกไฟล์เป็นชื่อ index.html
- เปิดไฟล์นั้นด้วย Browser แล้วกดอนุญาตให้เข้าถึงกล้อง (Allow camera access)
การสร้าง Interactive 3D ในบทความนี้ทำให้ผมเห็นถึงศักยภาพของ AI ที่ช่วยให้การพัฒนาแอปพลิเคชันด้านกราฟิกและระบบจับการเคลื่อนไหวมือมีความง่ายและรวดเร็วขึ้นมาก ผมเริ่มต้นด้วยการเข้าไปที่ Google AI Studio และเลือกใช้โมเดล Gemini 3 Pro Preview เพื่อช่วยในการสร้างโค้ดสำหรับระบบ 3D Particle ที่โต้ตอบได้แบบเรียลไทม์ ซึ่งโมเดลนี้สามารถเข้าใจคำอธิบายที่ละเอียดเกี่ยวกับการสร้างละอองอนุภาคแบบละเอียดพร้อมกับฟีเจอร์ MediaPipe Hands ที่ใช้กล้องเว็บแคมในการติดตามการเคลื่อนไหวของมือได้อย่างแม่นยำ สิ่งที่ผมชอบมากคือเมื่อลองเปิดมือ ระบบอนุภาคจะกระจายและลอยไปมาอย่างเสรี ส่วนเมื่อลองกำมือ อนุภาคจะรวมตัวกันอย่างรวดเร็วซึ่งสร้างความรู้สึกอินเตอร์แอคทีฟเหมือนในหนัง Sci-Fi สมัยใหม่อย่างที่ Tony Stark ใช้จริงเลยทีเดียว เทคนิคนี้มีประโยชน์มากสำหรับนักพัฒนาที่สนใจสร้างผลงานที่สัมพันธ์กับผู้ใช้งานแบบเรียลไทม์ เช่น งานสอน โฆษณา รวมทั้งเกมที่ต้องการจับความเคลื่อนไหวของมือโดยไม่ต้องใช้ฮาร์ดแวร์เพิ่มเติม นอกจากนี้การตั้งค่าและการเขียนโค้ดยังทำได้ไม่ซับซ้อนมาก เพียงแค่สร้างไฟล์ HTML ตามคำแนะนำและรันบน Browser พร้อมอนุญาตให้ใช้กล้องเท่านั้น ผมแนะนำให้ลองฝึกใช้ AI สร้างโค้ดแบบนี้ดู เพราะช่วยให้เข้าใจการผนวก AI กับการเขียนเว็บแอปได้ดีขึ้นมากจริงๆ
