Three.js – สอนสร้าง 3D บนเว็บไซต์

สร้างแอนิเมชัน ด้วย 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