SlideShare a Scribd company logo
1 of 11
Download to read offline
เว็บในปัจจุบนจะมี ความเป็ น interactive มากขึ้น สามารถ หมุน ซูม ดู ภาพ ข้อมูล หรื อ
                       ั
ทาการ เปิ ด ปิ ด อะไรบางอย่างได้ คล้าย ๆ กับเกม
บริ ษทหนึ่งในสิ งค์โปรได้นาเสนอ
     ั
เทคโนโลยีการแสดงข้อมูลเชิงตาแหน่ง
ภายในอาคารในรู ปแบบของ Interior
3D Model แบบ online โดยใช้ Google
Earth API เป็ นเครื่ องมือในการแสดงผล
โดยโปรแกรมประยุกต์จะแสดงมุมมอง
                               ่
เสมือนกับการที่ผชมได้เดินอยูในอาคาร
                  ู้
โปรแกรมทางานแบบ web application
โดยมีการแสดงอาคารที่ National
University of Singapore (NUS) library
ซึ่งอาคารและสิ่ งปลูกสร้างถูกสร้างขึ้น
พร้อมกับแสดงภาพ texture และมี
รายละเอียดของข้อมูลอาคารและสิ่ งปลูก
สร้างภายในต่างๆ
้
         google ได้ทาปลักอินตัวหนึ่ง ขึ้นมาเพื่อพัฒนาการเขียนเว็บเพจให้กาวไกลไปอีก
                        ๊
ขั้นหนึ่ง google o3d api จะต้องเขียน javascript เพื่อเรี ยกใช้ฟังก์ชนต่างๆ ข้อดีของการทา
                                                                    ั
googleo3d api คือ การที่เราสร้างโมเดลในโปรแกรมเช่น 3dmax studio maya เราสามารถ
ที่นาเอาโมเดลนั้นมาใช้ได้โดยการ convert แล้ว import มาใช้บนเว็บได้

http://code.google.com/apis/o3d
- Away3d เป็ นคลาสสาหรับสร้างภาพ 3 มิติภายในตัวเองลักษณะโครงสร้าง
แบบ Vector เราจะต้องนาพื้นผิวภายนอกที่ทาจาก Photoshop ทาการ Linkage เข้า
ไปโดยการ Set ที่ Property และทาการ addChild ภาพที่ Render ได้เข้าไป
ตัวอย่าง


- http://www.closier.nl/playground/railaway_express.html
papervision เป็ น library บน flash/flex/actionscript

  ตัวอย่าง
- http://www.youtube.com/watch?v=B3G9VdzGSl8&feature=related
ตัวอย่างเว็บ 3D
 http://translate.googleusercontent.com/translate_c?hl=th&langpair=en%
  7Cth&rurl=translate.google.co.th&u=http://ecodazoo.com/&usg=ALkJrhh
  wGQ3MqE77dr84s2dIDC_h883cKQ

 http://translate.googleusercontent.com/translate_c?hl=th&langpair=en%
  7Cth&rurl=translate.google.co.th&u=http://www.cleoag.ru/labs/flex/parks
  easons/&usg=ALkJrhjobLx4uAACbEQpaqP0koJtm8KVqA

 http://translate.googleusercontent.com/translate_c?hl=th&langpair=en%
  7Cth&rurl=translate.google.co.th&u=http://www.ecsw.pl/&usg=ALkJrhhO
  4lpFebtgX9ejhiLcDR4m6gRi0w

More Related Content

Viewers also liked

คู่มือ 3D Max กับงานสถาปัตยกรรม
คู่มือ 3D Max กับงานสถาปัตยกรรมคู่มือ 3D Max กับงานสถาปัตยกรรม
คู่มือ 3D Max กับงานสถาปัตยกรรมPiyaboon Nilkaew
 
คู่มือ Photoshop cs3
คู่มือ Photoshop cs3คู่มือ Photoshop cs3
คู่มือ Photoshop cs3charuwarin
 
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUpคู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUpSKETCHUP HOME
 
หนังสือ SketchUp อธิบายการสร้างและใช้ Component อย่างมีประสิทธิภาพ
หนังสือ SketchUp อธิบายการสร้างและใช้ Component อย่างมีประสิทธิภาพหนังสือ SketchUp อธิบายการสร้างและใช้ Component อย่างมีประสิทธิภาพ
หนังสือ SketchUp อธิบายการสร้างและใช้ Component อย่างมีประสิทธิภาพSKETCHUP HOME
 
คู่มือ Revit สำหรับงานสถาปัตยกรรม
คู่มือ Revit สำหรับงานสถาปัตยกรรมคู่มือ Revit สำหรับงานสถาปัตยกรรม
คู่มือ Revit สำหรับงานสถาปัตยกรรมPiyaboon Nilkaew
 
คู่มือ SketchUp
คู่มือ SketchUpคู่มือ SketchUp
คู่มือ SketchUpPiyaboon Nilkaew
 
มาตรฐานการเขียนแบบ
มาตรฐานการเขียนแบบมาตรฐานการเขียนแบบ
มาตรฐานการเขียนแบบPeerapong Veluwanaruk
 

Viewers also liked (8)

คู่มือ 3D Max กับงานสถาปัตยกรรม
คู่มือ 3D Max กับงานสถาปัตยกรรมคู่มือ 3D Max กับงานสถาปัตยกรรม
คู่มือ 3D Max กับงานสถาปัตยกรรม
 
Auto cad all
Auto cad allAuto cad all
Auto cad all
 
คู่มือ Photoshop cs3
คู่มือ Photoshop cs3คู่มือ Photoshop cs3
คู่มือ Photoshop cs3
 
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUpคู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
 
หนังสือ SketchUp อธิบายการสร้างและใช้ Component อย่างมีประสิทธิภาพ
หนังสือ SketchUp อธิบายการสร้างและใช้ Component อย่างมีประสิทธิภาพหนังสือ SketchUp อธิบายการสร้างและใช้ Component อย่างมีประสิทธิภาพ
หนังสือ SketchUp อธิบายการสร้างและใช้ Component อย่างมีประสิทธิภาพ
 
คู่มือ Revit สำหรับงานสถาปัตยกรรม
คู่มือ Revit สำหรับงานสถาปัตยกรรมคู่มือ Revit สำหรับงานสถาปัตยกรรม
คู่มือ Revit สำหรับงานสถาปัตยกรรม
 
คู่มือ SketchUp
คู่มือ SketchUpคู่มือ SketchUp
คู่มือ SketchUp
 
มาตรฐานการเขียนแบบ
มาตรฐานการเขียนแบบมาตรฐานการเขียนแบบ
มาตรฐานการเขียนแบบ
 

Similar to 3d for webapplication

ใบงานท 7
ใบงานท   7ใบงานท   7
ใบงานท 7Winwin Nim
 
บทที่1
บทที่1บทที่1
บทที่1jibbie23
 
บทที่1
บทที่1บทที่1
บทที่1jibbie23
 
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์sa_jaimun
 
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5Aungkana Na Na
 
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิกใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิกวาสนา ใจสุยะ
 
ใบงานที่7
ใบงานที่7ใบงานที่7
ใบงานที่7Mintra Han-kla
 
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5JoyCe Zii Zii
 
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5JoyCe Zii Zii
 
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”Orraya Swager
 
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”Net'Net Zii
 
Computer&creation of art
Computer&creation of artComputer&creation of art
Computer&creation of artbeverza
 

Similar to 3d for webapplication (20)

ใบงาน7
ใบงาน7ใบงาน7
ใบงาน7
 
ใบงาน7
ใบงาน7ใบงาน7
ใบงาน7
 
ใบงาน7
ใบงาน7ใบงาน7
ใบงาน7
 
ใบงานท 7
ใบงานท   7ใบงานท   7
ใบงานท 7
 
08
0808
08
 
08
0808
08
 
บทที่1
บทที่1บทที่1
บทที่1
 
บทที่1
บทที่1บทที่1
บทที่1
 
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
 
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5
 
7
77
7
 
7
77
7
 
08
0808
08
 
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิกใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
 
ใบงานที่7
ใบงานที่7ใบงานที่7
ใบงานที่7
 
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5
 
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5
 
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
 
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
ใบงานที่ 7 เรื่อง โครงงานประเภท “การประยุกต์ใช้งาน”
 
Computer&creation of art
Computer&creation of artComputer&creation of art
Computer&creation of art
 

3d for webapplication

  • 1.
  • 2.
  • 3. เว็บในปัจจุบนจะมี ความเป็ น interactive มากขึ้น สามารถ หมุน ซูม ดู ภาพ ข้อมูล หรื อ ั ทาการ เปิ ด ปิ ด อะไรบางอย่างได้ คล้าย ๆ กับเกม
  • 4.
  • 5. บริ ษทหนึ่งในสิ งค์โปรได้นาเสนอ ั เทคโนโลยีการแสดงข้อมูลเชิงตาแหน่ง ภายในอาคารในรู ปแบบของ Interior 3D Model แบบ online โดยใช้ Google Earth API เป็ นเครื่ องมือในการแสดงผล โดยโปรแกรมประยุกต์จะแสดงมุมมอง ่ เสมือนกับการที่ผชมได้เดินอยูในอาคาร ู้ โปรแกรมทางานแบบ web application โดยมีการแสดงอาคารที่ National University of Singapore (NUS) library ซึ่งอาคารและสิ่ งปลูกสร้างถูกสร้างขึ้น พร้อมกับแสดงภาพ texture และมี รายละเอียดของข้อมูลอาคารและสิ่ งปลูก สร้างภายในต่างๆ
  • 6. google ได้ทาปลักอินตัวหนึ่ง ขึ้นมาเพื่อพัฒนาการเขียนเว็บเพจให้กาวไกลไปอีก ๊ ขั้นหนึ่ง google o3d api จะต้องเขียน javascript เพื่อเรี ยกใช้ฟังก์ชนต่างๆ ข้อดีของการทา ั googleo3d api คือ การที่เราสร้างโมเดลในโปรแกรมเช่น 3dmax studio maya เราสามารถ ที่นาเอาโมเดลนั้นมาใช้ได้โดยการ convert แล้ว import มาใช้บนเว็บได้ http://code.google.com/apis/o3d
  • 7. - Away3d เป็ นคลาสสาหรับสร้างภาพ 3 มิติภายในตัวเองลักษณะโครงสร้าง แบบ Vector เราจะต้องนาพื้นผิวภายนอกที่ทาจาก Photoshop ทาการ Linkage เข้า ไปโดยการ Set ที่ Property และทาการ addChild ภาพที่ Render ได้เข้าไป ตัวอย่าง - http://www.closier.nl/playground/railaway_express.html
  • 8. papervision เป็ น library บน flash/flex/actionscript ตัวอย่าง - http://www.youtube.com/watch?v=B3G9VdzGSl8&feature=related
  • 10.
  • 11.  http://translate.googleusercontent.com/translate_c?hl=th&langpair=en% 7Cth&rurl=translate.google.co.th&u=http://ecodazoo.com/&usg=ALkJrhh wGQ3MqE77dr84s2dIDC_h883cKQ  http://translate.googleusercontent.com/translate_c?hl=th&langpair=en% 7Cth&rurl=translate.google.co.th&u=http://www.cleoag.ru/labs/flex/parks easons/&usg=ALkJrhjobLx4uAACbEQpaqP0koJtm8KVqA  http://translate.googleusercontent.com/translate_c?hl=th&langpair=en% 7Cth&rurl=translate.google.co.th&u=http://www.ecsw.pl/&usg=ALkJrhhO 4lpFebtgX9ejhiLcDR4m6gRi0w