รายงานการศกษาเรอง

3d กบงาน web application

โดย

นางสาวพรทพย แซเบ รหสนกศกษา 13510210

คณะเทคโนโลยสารสนเทศและการสอสาร มหาวทยาลยศลปากร

สาขาเทคโนโลยสารสนเทศเพอการออกแบบ เอกเวบและสอโตตอบ

( Web and Interactive)

รายงานการศกษาฉบบนเปนสวนหนงของรายวชา 802407 สมมนา

ภาคเรยนท 1 ปการศกษา 2554

ค าน า

รายงานฉบบนจดทาเพอตองการอธบายเกยวกบการใชงาน 3D กบ web application ให

กบบคคล ทสนใจเกยวกบงานดาน 3D ซงจะชแจงถงขอมลรายละเอยด และน าเสนอตวอยางทนาสนใจ ให

กบผอานได เขาใจอยางถกตอง ซงรายงานนจะม เนอหาเกยวกบความร เบองตนเกยวกบงาน web

application และเทคโนโลยใหมทน ามาใชกบงานเวบไซต โปรแกรมทใชส าหรบการท า 3D ลง

เวบไซต รวมทงสอดานตาง ๆ ทน าเอา 3D มาใชงาน ผจดท าหวงวารายงานฉบบนจะให ความร และเปน

ประโยชนแกผอานทก ๆทาน

นางสาวพรทพย แซเบ

ผจดท า

3d กบงาน web application

เวบในปจจบนจะม ความเปน interactive มากขน สามารถ หมน ซม ด ภาพ

ขอมล หรอ ท าการ เปด ปด อะไรบางอยางได คลาย ๆ กบเกม

3d กบ icon

Icon ในปจจบนมการท าใหเปนรป 3dมากขน เพอเพมความนาสนใจ และ

ความแปลกใหมบนหนาเวบ รวมถงการมลกเลนตาง ๆ ใหนาสนใจมากขน

บรษทหนงในสงคโปรไดน าเสนอ

เทคโนโลยการแสดงขอมลเชงต าแหนง

ภายใน อาคารในรปแบบของ Interior

3D Model แบบ online โดยใช Google

Earth API เปนเครองมอในการ

แสดงผล โดยโปรแกรมประยกตจะ

แสดงมมมองเสมอนกบการทผชมได

เดนอยในอาคารโปรแกรมท างานแบบ

web application โดยมการแสดงอาคาร

ท National University of Singapore

(NUS) library ซงอาคารและสงปลก

สรางถกสรางขนพรอมกบแสดงภาพ

texture และมรายละเอยดของขอมล

อาคารและสงปลกสรางภายในตางๆ

Google o3d

google ไดท าปลกอนตวหนง ขนมาเพอพฒนาการเขยนเวบเพจให

กาวไกลไปอกขนหนง google o3d api จะตองเขยน javascript เพอเรยกใช

ฟงกชนตางๆ ขอดของการท า googleo3d api คอ การทเราสรางโมเดลใน

โปรแกรมเชน 3dmax studio maya เราสามารถทน าเอาโมเดลนนมาใชได

โดยการ convert แลว import มาใชบนเวบได

ตวอยาง

http://code.google.com/apis/o3d

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

ตวอยางเวบ 3d

3d ในดานอน ๆ

นอกจากงานเวบแลว 3d ยงน าไปใชกบงานดานอน ๆ เชน งาน

โฆษณาหรอบนมอถอ smartphone

เชน

http://www.youtube.com/watch?v=TzWE_PpPjig&feature=player_

embedded

http://www.youtube.com/watch?v=gJ_5sDvAlNY&feature=related

บรรณานกรม - 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