The latest articles on DEV Community by bella (@offdek). https://dev.to/offdek https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F688650%2Fa9a4e330-59e6-4f8a-b399-826ce946a23c.jpeg https://dev.to/offdek en bella Sat, 16 Oct 2021 05:31:31 +0000 https://dev.to/offdek/threejs-phuuenthaan-f34 https://dev.to/offdek/threejs-phuuenthaan-f34 <h1> Introduction เริ่ม </h1> <p>Credit: <a href="https://threejs-journey.com/">https://threejs-journey.com/</a> ต้อนรับทุกท่านเลยนะครับ สำหรับหัวข้อ Three.js พื้นฐาน ผมจะอธิบายการใช้งานเบื้องต้นของ Three.js จากบทเรียนที่ได้เรียน และรับรู้จากแหล่งอื่นมา โดยจะพูดจากสิ่งที่ผมเข้าใจ (ผมก็ไม่ได้เก่งนะครับ อาจจะมีบางอย่างผิดพลาด) จะพยายามอธิบายแบบเข้าใจง่ายๆนะครับ</p> <h2> ตัวอย่างโปรเจคที่สร้างด้วย Three.js </h2> <ul> <li> <a href="https://bruno-simon.com">https://bruno-simon.com</a> <code>portfolio ของผู้พัฒนา</code> </li> <li><a href="https://go.pioneer.com/cornrevolution">https://go.pioneer.com/cornrevolution</a></li> <li><a href="https://richardmattka.com">https://richardmattka.com</a></li> <li><a href="https://lusion.co">https://lusion.co</a></li> <li><a href="https://www.oculus.com/medal-of-honor/">https://www.oculus.com/medal-of-honor/</a></li> <li><a href="http://letsplay.ouigo.com">http://letsplay.ouigo.com</a></li> <li><a href="https://zen.ly">https://zen.ly</a></li> <li><a href="https://prior.co.jp/discover">https://prior.co.jp/discover</a></li> <li><a href="https://www.midwam.com">https://www.midwam.com</a></li> <li><a href="https://heraclosgame.com">https://heraclosgame.com</a></li> <li><a href="https://chartogne-taillet.com">https://chartogne-taillet.com</a></li> <li><a href="https://live.vanmoof.com/site">https://live.vanmoof.com/site</a></li> </ul> <p><code>แต่ละโปรเจคอย่างเจ๋งเลยใช่ไหมครับ</code></p> <h3> เขาทำสิ่งต่างๆ เหล่านี้ได้อย่างไร ??? </h3> <p>เราอาจจะพอเข้าใจบ้างแล้วว่า Three.js สามารถทำอะไรได้บ้างแล้ว ก่อนเข้าเนื้อหา ผมจะพูดถึง webGL ก่อน</p> <p><strong>webGL สั้นๆ</strong></p> <p>WebGL: Web Graphics Library (JavaScript API) เป็นตัวที่สามารถนำกราฟิกส์มาแสดงบนเว็บได้นั้นเอง ทั้งในรูปแบบ 2D และ 3D </p> <p><code>เจ้า Three.js ใช้คุณสมบัติของ WebGL นี้แหละมาใช้งานในการแสดงผล</code></p> javascript tutorial beginners