The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.

คู่มือการสร้างสื่อเทคโนโลยีภาพเสมือนจริง ( Augmented Reality)

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by นัฐภูมิ อุดมพร, 2023-07-16 02:57:21

คู่มือการสร้างสื่อเทคโนโลยีภาพเสมือนจริง ( Augmented Reality)

คู่มือการสร้างสื่อเทคโนโลยีภาพเสมือนจริง ( Augmented Reality)

9. จากนั้นคลิกค้างที่ New Material แล้วลากไปชนกับ Cube จะไปสีของ Cube ที่ต้องการ 10. จากนั้นเปิดโฟลเดอร์ที่จัดเก็บภาพที่เตรียมไว้ คลิกค้างที่ภาพ แล้วลากลงมาวางที่ Project Scene หน้า 48


11. คลิกที่ภาพ จากนั้นที่ช่อง Texture Type ให้เลือกเป็น Sprite (2D and UI) 12. จากนั้นคลิกที่ Apply หน้า 49


13. จากนั้นคลิกค้างที่ภาพ แล้วลากไปวางที่ Scene 14. ทำการปรับภาพ ให้อยู่ภายใต้ Image Target ใน Hierarchy หน้า 50


15. ทำการปรับตำแหน่งให้เหมาะสม 16. สามารถปรับแต่ง Cube ให้เป็นภาพได้จากการลากภาพที่ต้องการไปชนกับ Cube ดังภาพ หน้า 51


17. การเพิ่ม Model ทำการ unzip หรือ คลายไฟล์จากไฟล์ zip โดยคลิกขวาแล้วเลือกที่ “แยกไฟล์ลงที่นนี่” หรือ “Extract All…” 18. คลิกที่ “Extract” หน้า 52


19. สร้างโฟลเดอร์ Model เพื่อจัดเก็บ 3D Object อย่างเป็นระเบียบ โดย คลิกขวาที่ Project Scene > Create > Folder 20. เปลี่ยนชื่อโฟลเดอร์เป็น Model จากนั้นดับเบิ้ลคลิก หน้า 53


21. จากนั้นเปิดโฟลเดอร์ที่ทำการ unzip ไฟล์ในขั้นตอนที่ผ่านมา 22. เปิดโฟลเดอร์ Textures หน้า 54


23. ทำการลากไฟล์ที่ทำการ Unzip แล้วมาวางลงในโปรแกรม Unity ในหน้าต่าง Project ตามภาพ จากนั้นคลิก ย้อนกลับ 24. เปิดโฟลเดอร์ source หน้า 55


25. ทำการ Unzip 26. ทำการ unzip หรือ คลายไฟล์จากไฟล์ zip โดยคลิกขวาแล้วเลือกที่ “แยกไฟล์ลงที่นนี่” หรือ “Extract All…” หน้า 56


27. ทำการลากไฟล์โมเดลสามมิติที่ทำการ Unzip แล้วมาวางลงในโปรแกรม Unity ในหน้าต่าง Project ตามภาพ 28. จะปรากฏดังภาพ หน้า 57


29. จากนั้นคลิกค้างที่ไฟล์โมเดล แล้วลากไปวางที่ Scene ดังภาพ 30. ปรับตำแหน่งและขนาดของโมเดลตามต้องการ จากนั้นคลิกที่ไฟล์ภาพสีในโฟลเดอร์ Model จากนั้นลากไป ชนกับ โมเดลใน Scene หน้า 58


31. จะปรากฏสีของโมเดล ดังภาพ 32. ทำซ้ำจนโมเดลมีสีตามที่ต้องการ (ไฟล์โมเดลบางไฟล์จะปรากฏสีสันในทันที หากไฟล์โมเดลใดที่ไม่ปรากฏสี ให้ ทำตามขั้นตอนดังภาพ) จากนั้นทำการปรับโมเดล ให้อยู่ภายใต้ Marker_2 ใน Hierarchy หน้า 59


33. การเพิ่ม VDO คลิกขวาที่ Hierarchy จากนั้นคลิกที่ 3D Object > Plane 34. จะปรากฏดังภาพ หน้า 60


35. ให้ทำการปรับตำแหน่งของ Plane อยู่เหนือภาพ Marker ใน Scene 36. จากนั้นเปิดโฟลเดอร์ที่จัดเก็บไฟล์ VDO จากนั้นลากไฟล์ VDO ที่ต้องการมาวางที่ Project Scene หน้า 61


37. ทำการปรับ Plane ให้อยู่ภายใต้ Marker_2 ใน Hierarchy 38. จากนั้นทำการคลิกที่ Add Component พิมพ์ข้อความ Video Player จากนั้นคลิกเลือก Video Player หน้า 62


39. ตั้งค่า Video Player ตามต้องการ 40. ลากนำเข้า Video mp4 จาก Project Scene เข้ามาที่Video Clip หน้า 63


41. จากนั้นคลิกที่ Play จากนั้นนำภาพ Marker มาหน้ากล้องอุปกรณ์ของเรา เพื่อทดสอบ หากปรากฏภาพ 3D Object ดังภาพ ถือว่าเสร็จสมบูรณ์ 42. สลับ Marker เพื่อทดสอบ หากปรากฏภาพ 3D Object ดังภาพ ถือว่าเสร็จสมบูรณ์ หน้า 64


2.8 การ Save และการสร้าง Scene 1. ARScene คลิกที่เมนู File > Save As… 2. ตั้งชื่อ ARScene จากนั้นคลิกที่ Save หน้า 65


3. Index Scene คลิกที่เมนู File จากนั้นคลิกที่ New Scene 4. คลิกที่เมนู File > Save As… หน้า 66


5. ตั้งชื่อ index จากนั้นคลิกที่ Save 6. คลิกขวาที่ Hierarchy จากนั้นคลิกที่ UI จากนั้นคลิกที่ Canvas หน้า 67


7. จะปรากฏกราอบของ Canvas ดังภาพ 8. จากนั้นคลิกขวาที่ Canvas จากนั้นคลิกที่ UI จากนั้นคลิกที่ Panel หน้า 68


9. จากนั้นคลิกขวาที่ Panel จากนั้นคลิกที่ UI จากนั้นคลิกที่ Button 10. ทำการปรับตำแหน่ง Button ตามต้องการ หน้า 69


11. ปรับข้อความใน Button โดยการ คลิกที่ Text ใต้ Button ใน Hierarchy จากนั้นพิมพ์แก้ไขข้อความตาม ต้องการ ในช่อง Text 12. ปรับสีของ Text โดยการคลิกที่ Text ใต้ Button ใน Hierarchy จากนั้นคลิกที่ Color จากนั้นเลือกสีที่ต้อง หน้า 70


13. ปรับสีของ Button โดยการคลิกที่ Button ใน Hierarchy จากนั้นคลิกที่ Color จากนั้นเลือกสีที่ต้อง 11. เปลี่ยนชื่อ Button โดยการคลิกขวาที่ Button จากนั้นคลิกที่ Rename หน้า 71


15. จากนั้นพิมพ์ข้อความที่ต้องการ 16. จากนั้นเพิ่มและปรับแต่ง Button ตามความต้องการ หน้า 72


17. เพิ่มภาพ Background 18. คลิกที่ภาพ จากนั้นที่ช่อง Texture Type ให้เลือกเป็น Sprite (2D and UI) จากนั้นคลิกที่ Apply หน้า 73


19. จากนั้นคลิกค้างที่ภาพ แล้วลากไปวางที่ Scene 20. ปรับให้พอดีกับ Canvas หน้า 74


21. ปรับตำแหน่งให้อยู่ใน Panel 22. เพิ่มภาพและปรับแต่ง Panel ตามต้องการ จากนั้นให้ทำการ Save หน้า 75


23. Author Scene จากนั้นคลิกที่เมนู File จากนั้นคลิกที่ Save As… 24. ตั้งชื่อ Author จากนั้นคลิกที่ Save หน้า 76


25. ทำการลบ Button ออกหนึ่งปุ่ม โดยคลิกขวาที่ Button จากนั้นคลิกที่ Delete 26. ปรับข้อความใน Button โดยการ คลิกที่ Text ใต้ Button ใน Hierarchy จากนั้นพิมพ์แก้ไขข้อความตาม ต้องการ ในช่อง Text หน้า 77


27. เพิ่มภาพ เพื่อใช้เป็นข้อมูลผู้พัฒนา 28. คลิกที่ภาพ จากนั้นที่ช่อง Texture Type ให้เลือกเป็น Sprite (2D and UI) หน้า 78


29. จากนั้นคลิกที่ Apply 30. จากนั้นคลิกค้างที่ภาพ แล้วลากไปวางที่ Scene หน้า 79


31. ปรับตำแหน่งและขนาด ตามต้องการ 32. จากนั้นให้ทำการ Save โดยการคลิกที่เมนู File จากนั้นคลิกที่ Save หน้า 80


33. ดับเบิ้ลคลิกที่ ARScene จากนั้นคลิกขวาที่ Hierarchy จากนั้นคลิกที่ UI จากนั้นคลิกที่ Canvas 34. ทำการเพิ่มภาพ Background หน้า 81


35. เพิ่มภาพโลโก้ หน้า 82


2.9 การเชื่อมโยง Scene 1. ทำการดาวน์โหลด C# Script ที่มีชื่อว่า gotoScene.cs จาก https://drive.google.com/file/d/1- 6qzKnSGyxMJ2h6VYqRr46QKxlUC_D27/view?usp=drive_link จากนั้นทำการเพิ่ม C# Script ลงใน Project Scene 2. จะปรากฏดังภาพ หน้า 83


3. เริ่มเชื่อมโยงที่ Scene Author โดยคลิกที่ Button (btnAuthor) จากนั้นคลิกที่ Add Component จากนั้น พิมพ์ข้อความ gotoscene จากนั้นคลิกเลือก goto scene 4. จากนั้นคลิกที่เครื่องหมาย + หน้า 84


5. ทำการลาก Button (btnAuthor) มาวางที่ช่อง None (Object) 6. จากนั้นคลิกที่ No Function จากนั้นคลิกที่ gotoScene จากนั้นคลิกที่ goto(string) หน้า 85


7. จากนั้นพิมพ์ชื่อ Scene ที่ต้องการให้เชื่อมโยงไปเมื่อคลิกที่ Button (btnAuthor) 8. จากนั้นทำการ Save โดยการคลิกที่เมนู File > Save หน้า 86


9. จากนั้นดับเบิ้ลคลิกที่ Index 10. คลิกที่ Button (btnPlayAR) จากนั้นคลิกที่ Add Component จากนั้นพิมพ์ข้อความ gotoscene จากนั้น คลิกเลือก goto scene หน้า 87


11. จากนั้นคลิกที่เครื่องหมาย + 12. ทำการลาก Button (btnPlayAR) มาวางที่ช่อง None (Object) หน้า 88


13. จากนั้นคลิกที่ No Function จากนั้นคลิกที่ gotoScene จากนั้นคลิกที่ goto(string) 14. จากนั้นพิมพ์ชื่อ Scene ที่ต้องการให้เชื่อมโยงไปเมื่อคลิกที่ Button (btnPlayAR) หน้า 89


15. คลิกที่ Button (btnAuthor) จากนั้นคลิกที่ Add Component จากนั้นพิมพ์ข้อความ gotoscene จากนั้น คลิกเลือก goto scene 16. จากนั้นคลิกที่เครื่องหมาย + หน้า 90


17. ทำการลาก Button (btnAuthor) มาวางที่ช่อง None (Object) 18. จากนั้นคลิกที่ No Function จากนั้นคลิกที่ gotoScene จากนั้นคลิกที่ goto(string) หน้า 91


19. จากนั้นพิมพ์ชื่อ Scene ที่ต้องการให้เชื่อมโยงไปเมื่อคลิกที่ Button (btnAuthor) หน้า 92


2.10 การ Export project 1. คลิกไปที่ File แล้วเลือกตัวเลือก Build setting 2. คลิกที่ Add Open Scenes เพื่อเป็นการ Add scenes ที่เราได้ทำลงไป หน้า 93


3. ดับเบิ้ลคลิกที่ Scene ใน Project จากนั้นคลิกที่ Add Open Scenes 4. ดับเบิ้ลคลิกที่ Scene ใน Project จากนั้นคลิกที่ Add Open Scenes หน้า 94


5. จากนั้นคลิกที่ Player setting 6. คลิก Close หน้า 95


7. นำเข้าไฟล์โลโก้ที่ต้องการ 8. คลิกที่ภาพ จากนั้นที่ช่อง Texture Type ให้เลือกเป็น Sprite (2D and UI) หน้า 96


9. คลิกที่ Apply 10. คลิกที่ File > Build Settings… หน้า 97


Click to View FlipBook Version