รายงานการศึ�กษาเร��อง3d ก�บงาน web application

โดย

นางสาวพรทิ�พย� แซ่�เบ� รหั�สน�กศึ�กษา 13510210

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

สาขาเทิคโนโลย"สารสนเทิศึเพ��อการออกแบบ เอกเว&บและส��อโต้�ต้อบ

( Web and Interactive)

รายงานการศึ�กษาฉบ�บน")เป*นส�วนหัน��งของรายว�ชา 802407 ส�มมนา

ภาคเร"ยนทิ"� 1 ป-การศึ�กษา 2554

คำ��นำ��

ร�ยง�นำฉบับันำ��จัดท�เพื่��อต้�องก�รอธิ�บั�ยเก��ยวกบัก�รใช้�ง�นำ 3D กบั web application ให้� กบับั�คำคำล ท��สนำใจัเก��ยวกบัง�นำด��นำ 3D ซึ่#�งจัะช้��แจังถึ#งข้�อมู)ลร�ยละเอ�ยด และนำ��เสนำอต้วอย*�งท��นำ*�สนำใจั ให้� กบัผู้)�อ*�นำได� เข้��ใจัอย*�งถึ)กต้�อง ซึ่#�งร�ยง�นำนำ��จัะมู� เนำ��อห้�เก��ยวกบัคำว�มูร) � เบั��องต้�นำเก��ยวกบัง�นำ web

application และเทคำโนำโลย�ให้มู*ท��นำ��มู�ใช้�กบัง�นำเว.บัไซึ่ต้/ โปรแกรมูท��ใช้�ส��ห้รบัก�รท�� 3D ลงเว.บัไซึ่ต้/ รวมูท�งส��อด��นำต้*�ง ๆ ท��นำ��เอ� 3D มู�ใช้�ง�นำ ผู้)�จัดท��ห้วงว*�ร�ยง�นำฉบับันำ��จัะให้� คำว�มูร) � และเป2นำประโยช้นำ/แก*ผู้)�อ*�นำท�ก ๆท*�นำ

นำ�งส�วพื่รท�พื่ย/ แซึ่*เบั�

ผู้)�จัดท��

3d ก�บงาน web application

เว.บัในำป3จัจั�บันำจัะมู� คำว�มูเป2นำ interactive มู�กข้#�นำ ส�มู�รถึ ห้มู�นำ ซึ่)มู ด) ภ�พื่ ข้�อมู)ล ห้ร�อ ท��ก�ร เป5ด ป5ด อะไรบั�งอย*�งได� คำล��ย ๆ กบัเกมู

3d ก�บ icon

Icon ในำป3จัจั�บันำมู�ก�รท��ให้�เป2นำร)ป 3d มู�กข้#�นำ เพื่��อเพื่��มูคำว�มูนำ*�สนำใจั และคำว�มูแปลกให้มู*บันำห้นำ��เว.บั รวมูถึ#งก�รมู�ล)กเล*นำต้*�ง ๆ ให้�นำ*�สนำใจัมู�กข้#�นำ

บัร�ษัทห้นำ#�งในำส�งคำ/โปรได�นำ��เสนำอ เทคำโนำโลย�ก�รแสดงข้�อมู)ลเช้�งต้��แห้นำ*ง ภ�ยในำ อ�คำ�รในำร)ปแบับัข้อง Interior 3D Model

แบับั online โดยใช้� Google Earth API เป2นำเคำร��องมู�อในำก�รแสดงผู้ล โดยโปรแกรมูประย�กต้/จัะแสดงมู�มู

มูองเสมู�อนำกบัก�รท��ผู้)�ช้มูได�เด�นำอย)*ในำอ�คำ�รโปรแกรมูท��ง�นำแบับั web application โดยมู�ก�รแสดงอ�คำ�รท�� National University of Singapore (NUS)

library ซึ่#�งอ�คำ�รและส��งปล)กสร��งถึ)กสร��งข้#�นำพื่ร�อมูกบัแสดงภ�พื่

texture และมู�ร�ยละเอ�ยดข้องข้�อมู)ล อ�คำ�รและส��งปล)กสร��งภ�ยในำ

ต้*�งๆ

Google o3d

google ได�ท��ปล7กอ�นำต้วห้นำ#�ง ข้#�นำมู�เพื่��อพื่ฒนำ�ก�รเข้�ยนำเว.บัเพื่จัให้�ก��วไกลไปอ�กข้�นำห้นำ#�ง google o3d api จัะต้�องเข้�ยนำ javascript เพื่��อเร�ยกใช้�ฟั3งก/ช้นำต้*�งๆ ข้�อด�ข้องก�รท��

googleo3d api คำ�อ ก�รท��เร�สร��งโมูเดลในำโปรแกรมูเช้*นำ 3dmax studio maya เร�ส�มู�รถึท��นำ��เอ�โมูเดลนำ�นำมู�ใช้�ได�โดยก�ร convert

แล�ว import มู�ใช้�บันำเว.บัได�

ต้วอย*�ง

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

Flash 3d

- Away3d เป2นำคำล�สส��ห้รบัสร��งภ�พื่ 3 มู�ต้�ภ�ยในำต้วเองลกษัณะโคำรงสร��งแบับั Vector เร�จัะต้�องนำ��พื่��นำผู้�วภ�ยนำอกท��ท��จั�ก Photoshop

ท��ก�ร Linkage เข้��ไปโดยก�ร Set ท�� Property และท��ก�ร addChild ภ�พื่ท�� Render ได�เข้��ไป

ต้วอย*�ง

- http://www.closier.nl/playground/railaway_express.html

papervision

papervision เป2นำ 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_embedd

ed

- 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