1. รายงานการศึกษาเรื่อง
3d กับงาน web application
โดย
นางสาวพรทิพย์ แซ่ เบ้ รหัสนักศึกษา 13510210
คณะเทคโนโลยีสารสนเทศและการสื่ อสาร มหาวิทยาลัยศิลปากร
สาขาเทคโนโลยีสารสนเทศเพือการออกแบบ เอกเว็บและสื่ อโต้ ตอบ
่
( Web and Interactive)
รายงานการศึกษาฉบับนีเ้ ป็ นส่ วนหนึ่งของรายวิชา 802407 สั มมนา
ภาคเรียนที่ 1 ปี การศึกษา 2554

2. คานา
รายงานฉบับนี้จดทาเพื่อต้องการอธิบายเกี่ยวกับการใช้งาน 3D กับ web application ให้
ั
กับบุคคล ที่สนใจเกี่ยวกับงานด้าน 3D ซึ่งจะชี้แจงถึงข้อมูลรายละเอียด และนาเสนอตัวอย่างที่น่าสนใจ ให้
กับผูอ่านได้ เข้าใจอย่างถูกต้อง ซึ่งรายงานนี้จะมี เนื้อหาเกี่ยวกับความรู้ เบื้องต้นเกี่ยวกับงาน web
้
application และเทคโนโลยีใหม่ที่นามาใช้กบงานเว็บไซต์ โปรแกรมที่ใช้สาหรับการทา 3D ลง
ั
เว็บไซต์ รวมทั้งสื่อด้านต่าง ๆ ที่นาเอา 3D มาใช้งาน ผูจดทาหวังว่ารายงานฉบับนี้จะให้ ความรู้ และเป็ น
้ั
ประโยชน์แก่ผอ่านทุก ๆท่าน
ู้
นางสาวพรทิพย์ แซ่ เบ้
ผูจดทา
้ั

3. 3d กับงาน web application
เว็บในปัจจุบนจะมี ความเป็ น interactive มากขึ้น สามารถ หมุน ซูม ดู ภาพ
ั
ข้อมูล หรื อ ทาการ เปิ ด ปิ ด อะไรบางอย่างได้ คล้าย ๆ กับเกม

4. 3d กับ icon
Icon ในปัจจุบนมีการทาให้เป็ นรู ป 3dมากขึ้ น เพื่อเพิมความน่าสนใจ และ
ั ่
ความแปลกใหม่บนหน้าเว็บ รวมถึงการมีลูกเล่นต่าง ๆ ให้น่าสนใจมากขึ้น

5. บริ ษทหนึ่งในสิ งค์โปรได้นาเสนอ
ั
เทคโนโลยีการแสดงข้อมูลเชิงตาแหน่ง
ภายใน อาคารในรู ปแบบของ Interior
3D Model แบบ online โดยใช้ Google
Earth API เป็ นเครื่ องมือในการ
แสดงผล โดยโปรแกรมประยุกต์จะ
แสดงมุมมองเสมือนกับการที่ผชมได้
ู้
่
เดินอยูในอาคารโปรแกรมทางานแบบ
web application โดยมีการแสดงอาคาร
ที่ National University of Singapore
(NUS) library ซึ่งอาคารและสิ่ งปลูก
สร้างถูกสร้างขึ้นพร้อมกับแสดงภาพ
texture และมีรายละเอียดของข้อมูล
อาคารและสิ่ งปลูกสร้างภายในต่างๆ

6. Google o3d
google ได้ทาปลักอินตัวหนึ่ ง ขึ้นมาเพื่อพัฒนาการเขียนเว็บเพจให้
๊
ก้าวไกลไปอีกขั้นหนึ่ง google o3d api จะต้องเขียน javascript เพื่อเรี ยกใช้
ฟังก์ชนต่างๆ ข้อดีของการทา googleo3d api คือ การที่เราสร้างโมเดลใน
ั
โปรแกรมเช่น 3dmax studio maya เราสามารถที่นาเอาโมเดลนั้นมาใช้ได้
โดยการ convert แล้ว import มาใช้บนเว็บได้
ตัวอย่าง
http://code.google.com/apis/o3d

7. Flash 3d
- Away3d เป็ นคลาสสาหรับสร้างภาพ 3 มิติภายในตัวเองลักษณะ
โครงสร้างแบบ Vector เราจะต้องนาพื้นผิวภายนอกที่ทาจาก Photoshop
ทาการ Linkage เข้าไปโดยการ Set ที่ Property และทาการ addChild ภาพที่
Render ได้เข้าไป
ตัวอย่าง
- http://www.closier.nl/playground/railaway_express.html
papervision
papervision เป็ น library บน flash/flex/actionscript สามารถ เขียน object
3d บน actionscript ได้อย่างงดงาม
ตัวอย่าง
- http://www.youtube.com/watch?v=B3G9VdzGSl8&feature=related

8. ตัวอย่างเว็บ 3d

9. 3d ในด้านอืน ๆ
่
ั
นอกจากงานเว็บแล้ว 3d ยังนาไปใช้กบงานด้านอื่น ๆ เช่น งาน
โฆษณาหรื อบนมือถือ smartphone
เช่น
http://www.youtube.com/watch?v=TzWE_PpPjig&feature=player_
embedded
http://www.youtube.com/watch?v=gJ_5sDvAlNY&feature=related

10. บรรณานุกรม
- http://sixrevisions.com/design-showcase-inspiration/3d-elements-web-design/
- http://www.youtube.com/watch?v=TzWE_PpPjig&feature=player_embedded
- http://www.youtube.com/watch?v=gJ_5sDvAlNY&feature=related
- http://code.google.com/apis/o3d
- http://www.youtube.com/watch?v=B3G9VdzGSl8&feature=related