สร้างแอนิเมชัน ด้วย three.js
การเขียนโปรแกรมเพื่อสร้างภาพ 3 มิติ ทั้งในรูปแบบ Desktop Application และ Web Application นิยมใช้ Library ที่สร้างขึ้นมาเพื่องานเขียนโปรแกรมกราฟิกส์โดยเฉพาะ ซึ่งที่นิยมใช้กันมาก คือ OpenGL
ในส่วนของ Web Application ได้นำเอา OpenGL มาปรับให้ทำงานบนเว็บได้ และตั้งชื่อว่า WebGL และใช้ภาษา JavaScript มาพัฒนาเพื่อให้ทำงานบนเว็บได้
WebGL เป็นการผสมผสานงานกราฟิกส์บนเว็บไซต์ โดยใช้บราวเซอร์ในการประมวลผลแปลคำสั่ง HTML กับภาษา JavaScript ซึ่งภายในได้นั้นจะต้องมี library ของ OpenGL รวบรวมเอาไว้เป็น API แล้ว จึงทำให้การทำงานคอมพิวเตอร์กราฟิกส์ง่ายขึ้น รองรับกับการเขียนโปรแกรมแบบ 2 มิติ และ 3 มิติ รวมทั้ง interactive กับผู้ใช้ผ่านคีย์บอร์ดและเมาส์ และสุดท้ายการเขียนโปรแกรมแบบแอนิเมชันด้วย เพราะ HTML5 มี Tag canvas สำหรับสร้างกราฟิกส์ร่วมกับภาษา JavaScript อยู่แล้ว
ต่อมาเริ่มมี Library ของกลุ่มพัฒนาต่อยอด เพื่อให้การพัฒนาโปรแกรมกราฟฟิกส์ 3 มิติเขียนได้ง่ายและรวดเร็วขึ้น หลาย ๆ กลุ่ม ที่ได้รับความนิยมมาก และเพิ่มขึ้นอย่างรวดเร็ว คือ Three.js
React Three Fiber คือ การนำไลบรารี three.js มาประยุกต์ให้ใช้ได้กับ React.js และทางผู้สร้างก็ยังได้อธิบายไว้ใน GitHub Repository ของ React Three Fiber จะไม่มี overhead ที่จะทำให้ช้าลงกับต้นฉบับอย่าง three.js แต่อย่างใด อีกทั้งยังอัพเดตไปพร้อม ๆ กับ three.js
บทความ สอนสร้างแอนิเมชั่น ด้วย three.js
- โปรแกรมแรก React กับ Three.js
- สร้าง scene ด้วย react-three-fiber
- แกนและการควบคุมวงโคจร
- ภาพรวมเรขาคณิต (Overview of Geometry)
- แสงและเงา (Lights and Shadows)
- ภาพรวมของวัสดุ (Overview of Materials)
- การเพิ่มพื้นผิว (Adding Textures)
- สร้างภาพสามมิติแบบโต้ตอบ (Interactive)
- จัดระเบียบโค้ดด้วย .JSX
- ควบคุมการลาก (Implementing Drag Controls)
- การใช้ไลบรารี่ฟิสิกส์ (Adding Physics)
- การเพิ่มโมเดลให้กับฉาก (Models to a Scene)
- คุณสมบัติทางกายภาพ (Bounding Boxes)
