Upload
cakiiminikii
View
424
Download
1
Embed Size (px)
Citation preview
รายงานการศึ�กษาเร��อง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