Three.js พื้นฐาน

Introduction เริ่ม

Credit: https://threejs-journey.com/ ต้อนรับทุกท่านเลยนะครับ สำหรับหัวข้อ Three.js พื้นฐาน ผมจะอธิบายการใช้งานเบื้องต้นของ Three.js จากบทเรียนที่ได้เรียน และรับรู้จากแหล่งอื่นมา โดยจะพูดจากสิ่งที่ผมเข้าใจ (ผมก็ไม่ได้เก่งนะครับ อาจจะมีบางอย่างผิดพลาด) จะพยายามอธิบายแบบเข้าใจง่ายๆนะครับ

ตัวอย่างโปรเจคที่สร้างด้วย Three.js

• https://bruno-simon.com portfolio ของผู้พัฒนา
• https://go.pioneer.com/cornrevolution
• https://richardmattka.com
• https://lusion.co
• https://www.oculus.com/medal-of-honor/
• http://letsplay.ouigo.com
• https://zen.ly
• https://prior.co.jp/discover
• https://www.midwam.com
• https://heraclosgame.com
• https://chartogne-taillet.com
• https://live.vanmoof.com/site

แต่ละโปรเจคอย่างเจ๋งเลยใช่ไหมครับ

เขาทำสิ่งต่างๆ เหล่านี้ได้อย่างไร ???

เราอาจจะพอเข้าใจบ้างแล้วว่า Three.js สามารถทำอะไรได้บ้างแล้ว ก่อนเข้าเนื้อหา ผมจะพูดถึง webGL ก่อน

webGL สั้นๆ

WebGL: Web Graphics Library (JavaScript API) เป็นตัวที่สามารถนำกราฟิกส์มาแสดงบนเว็บได้นั้นเอง ทั้งในรูปแบบ 2D และ 3D

เจ้า Three.js ใช้คุณสมบัติของ WebGL นี้แหละมาใช้งานในการแสดงผล