17
บทที่ 4 การออกแบบทางกายภาพ 4.1 โครงสร้างแอพพลิเคชันสื่อจาลองสามมิติแผนที่และอาคารเรียน มหาวิทยาลัยสยาม โครงสร้างแอพพลิเคชันประกอบไปด้วย 4.1.1 หน้ากล้อง เมื่อเปิดแอพพลิเคชันจะพบหน้ากล้องที่ส ่อง Marker ได้ 2 แบบ ดังนี 4.1.1.1 ส่อง Marker ขึ ้นโมเดล 4.1.1.2 ส่อง Marker ขึ ้นรูปผ่านเพจใน Facebook 4.1.2 ภายใน Marker โมเดล จะมีปุ ่ม Detail เพื่อแสดงข้อมูล 4.1.3 ภายใน Marker รูป ถ้ามีการส่องจะขึ ้นปุ ่ ม ถ้ากดแล้วจะพาเข้าไปในเพจเฟสบุคโชว์อัลบั ้ม รูปแต่ละอาคาร รูปที่ 4.1 แสดงโครงสร้างแอพพลิเคชันสื่อจาลองสามมิติแผนที่และอาคารเรียนมหาวิทยาลัย สยาม

บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

33

บทท 4

การออกแบบทางกายภาพ

4.1 โครงสรางแอพพลเคชนสอจ าลองสามมตแผนทและอาคารเรยน มหาวทยาลยสยาม

โครงสรางแอพพลเคชนประกอบไปดวย

4.1.1 หนากลอง เมอเปดแอพพลเคชนจะพบหนากลองทสอง Marker ได 2 แบบ ดงน

4.1.1.1 สอง Marker ขนโมเดล

4.1.1.2 สอง Marker ขนรปผานเพจใน Facebook

4.1.2 ภายใน Marker โมเดล จะมปม Detail เพอแสดงขอมล

4.1.3 ภายใน Marker รป ถามการสองจะขนปม ถากดแลวจะพาเขาไปในเพจเฟสบคโชวอลบม

รปแตละอาคาร

รปท 4.1 แสดงโครงสรางแอพพลเคชนสอจ าลองสามมตแผนทและอาคารเรยนมหาวทยาลย

สยาม

Page 2: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

34

4.2 การออกแบบ Marker

เปนภาพสญลกษณไวใชแสดงผลใหโมเดลขนมา โดยใชโปรแกรม Adobe Illustration CS6

รปท 4.2 Marker อาคาร 1

รปท 4.3 Marker อาคาร 2

รปท 4.4 Marker อาคาร 3

Page 3: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

35

รปท 4.5 Marker อาคาร 4

รปท 4.6 Marker อาคาร 5 และ 7

รปท 4.7 Marker อาคาร 6

Page 4: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

36

รปท 4.8 Marker อาคาร 8 และ 10

รปท 4.9 Marker อาคาร 9

รปท 4.10 Marker อาคาร 11

Page 5: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

37

รปท 4.11 Marker อาคาร 12

รปท 4.12 Marker อาคาร 13

รปท 4.13 Marker อาคาร 14

Page 6: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

38

รปท 4.14 Marker อาคาร 15

รปท 4.15 Marker อาคาร 16

รปท 4.16 Marker อาคาร 17

Page 7: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

39

รปท 4.17 Marker อาคาร 18

รปท 4.18 Marker อาคาร 19

รปท 4.19 Marker อาคาร 20

Page 8: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

40

รปท 4.20 Marker อาคาร 21

รปท 4.21 Marker อาคาร 22

4.3 การออกแบบ Model

เปนโมเดลอาคารทโชวขนมาหลงจากถกสองจาก Marker โดยใชโปรแกรม Maya 2014

รปท 4.22 โมเดลอาคาร 1

Page 9: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

41

รปท 4.23 โมเดลอาคาร 2

รปท 4.24 โมเดลอาคาร 3

รปท 4.25 โมเดลอาคาร 4

รปท 4.26 โมเดลอาคาร 5 และ 7

Page 10: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

42

รปท 4.27 โมเดลอาคาร 6

รปท 4.28 โมเดลอาคาร 8 และ 10

รปท 4.29 โมเดลอาคาร 9

รปท 4.30 โมเดลอาคาร 11

Page 11: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

43

รปท 4.31 โมเดลอาคาร 12

รปท 4.32 โมเดลอาคาร 13

รปท 4.33 โมเดลอาคาร 14

รปท 4.34 โมเดลอาคาร 15

Page 12: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

44

รปท 4.35 โมเดลอาคาร 16

รปท 4.36 โมเดลอาคาร 17

รปท 4.37 โมเดลอาคาร 18

รปท 4.38 โมเดลอาคาร 19

Page 13: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

45

รปท 4.39 โมเดลอาคาร 20

รปท 4.40 โมเดลจดท 21 สวนสนตภาพ

รปท 4.41 โมเดลจดท 22 ลานหวชาง

รปท 4.42 โมเดลรานทรชอปม.สยาม

Page 14: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

46

รปท 4.43 โมเดลหอนาฬกาม.สยาม

รปท 4.44 โมเดลรานอาหารเรอนไทย

4.4 การออกแบบสวนตดตอกบผใชงาน

ออกแบบสวนตดตอกบผใชงานตงแตไอคอนแอพพลเคชน ปมตางๆ ใหใชงานงาย

ไมซบซอน

รปท 4.45 โบชวรแผนทม.สยาม

Page 15: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

47

รปท 4.46 ไอคอนแอพพลเคชน

รปท 4.47 หนาจอการสอง Marker แบบท 1

เมอน าโบชวรแผนทม.สยามมาแลว เปดแอพพลเคชนมาสองท Marker จะมโมเดลสามมต

ของอาคารนนแสดงขนมา สามารถสมผสทหนาจอเพอหมนโมเดลได ปมขางลางโมเดลคอปม

Detail เพอดขอมลของอาคารนนๆ สวนปมขวาบนสามารถปดเสยงเพลงมารชมหาวทยาลยได

Page 16: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

48

รปท 4.48 หนาจอขอมลจากปม Detail

เมอท าการกดปม Detail ขางลางโมเดลมา จะแสดงหนาจอของขอมลอาคารนนๆ โดยมปม

ปดอยขางลางหนาจอ

รปท 4.49 หนาจอการสอง Marker แบบท 2

เมอน า Marker ทสามารถสองรปภาพภายใน Facebook มาแลว เปดแอพพลเคชนพรอม

สองไปท Marker จะมปมขนดานลางของหนาจอ Show Picture

Page 17: บทที่ 4 การออกแบบทางกายภาพ...48 รูปที่ 4.48 หน้าจอข้อมูลจากปุ่ม Detail เมื่อท

49

รปท 4.50 หนาจอรปภาพจากปม Show Picture

หลงจากทกดปม Show Picture ไปนน แอพพลเคชนจะถกเชอมตอไปยงเฟสบค เพอแสดง

รปภาพทมขอมลประกอบ (Marker แบบท 2 น ตองเชอมตออนเทอรเนต)