การเล่าเรื่อง 3 มิติ: คู่มือการปรับแต่ง

บทนำ

คู่มือนี้จะแนะนำวิธีต่างๆ ในการปรับแต่งโซลูชันการเล่าเรื่องแบบ 3 มิติ ซึ่งช่วยให้คุณสร้างเรื่องราวเกี่ยวกับตำแหน่งทางภูมิศาสตร์ที่น่าติดตามได้

คุณสามารถกำหนดค่าโซลูชันการเล่าเรื่องได้ด้วย 2 วิธีที่สะดวก วิธีแรกคือใช้ UI ที่ใช้งานง่ายซึ่งมีอยู่ในแอปผู้ดูแลระบบ โดยมีแผงการกำหนดค่าเฉพาะ ในแผงนี้ ผู้ใช้สามารถแก้ไขพร็อพเพอร์ตี้หลักๆ เช่น imageUrl, title, date และอื่นๆ ได้ ทั้งสำหรับเรื่องราวโดยรวมและแต่ละส่วนเนื้อหา

วิธีที่สองคือปรับแต่งการตั้งค่ากล้องและตัวเลือกโฟกัสสำหรับแต่ละส่วนเนื้อหาโดยใช้ GUI ในแอปผู้ดูแลระบบ เมื่อพอใจกับการกำหนดค่าแล้ว ผู้ใช้จะมีตัวเลือกในการดาวน์โหลดไฟล์ JSON ที่สร้างขึ้น

หรือคุณจะแก้ไขไฟล์ JSON โดยตรงก็ได้ คุณสามารถปรับโครงสร้าง JSON, โหลดโซลูชันการเล่าเรื่องที่กำหนดค่าไว้ และข้ามแผงควบคุมของผู้ดูแลระบบได้ แนวทางแบบคู่ขนานนี้มีทั้งอินเทอร์เฟซที่ใช้งานง่ายและการจัดการ JSON ขั้นสูง

เริ่มต้นใช้งาน

ใช้ แอปผู้ดูแลระบบการเล่าเรื่องแบบ 3 มิติที่โฮสต์

หรือ

รับคีย์ API และ ดาวน์โหลด โค้ดจาก GitHub

เปิดใช้

• Photorealistic 3D Tiles API
• Places API

สร้างเรื่องราวของคุณเอง

เลย์เอาต์โดยรวมของเรื่องราวจะแบ่งออกเป็นเรื่องราวปกตามด้วยส่วนเนื้อหา ทั้งปกและส่วนเนื้อหาปรับแต่งได้ทีละรายการ ดูรายละเอียด
เกี่ยวกับวิธีสร้างและปรับแต่งเรื่องราวโดยใช้ทั้งแอปผู้ดูแลระบบ และไฟล์การกำหนดค่า

หน้าปก

สิ่งแรกที่คุณต้องทำคือสร้างหน้าปกสำหรับเรื่องราวโดยรวม ซึ่งจะเพิ่มภาพรวม รูปปก และคำอธิบายลงในเรื่องราว

ใช้แอปผู้ดูแลระบบ

เริ่มต้นด้วยการเพิ่มหน้าปกสำหรับเรื่องราว โดยทำได้จากแอปผู้ดูแลระบบโดยใช้หน้าจอดังนี้

ใช้ config.json

นอกจากนี้ หากคุณมีไฟล์การกำหนดค่า คุณสามารถเพิ่มส่วนเหล่านี้ลงในไฟล์ได้โดยตรง

• 1. imageUrl: URL ของไฟล์สื่อหลัก (รูปภาพ, GIF หรือวิดีโอ) สำหรับเรื่องราวทั้งหมด

URL นี้อาจเป็น URL ที่เข้าถึงได้แบบสาธารณะซึ่งชี้ไปยังไฟล์รูปภาพ, GIF หรือวิดีโอที่คุณต้องการใช้เป็นสื่อหลักสำหรับเรื่องราวทั้งหมด

• 2. title: ชื่อเรื่องของเรื่องราวทั้งหมด
• 3. date: วันที่หรือกรอบเวลาที่เชื่อมโยงกับเรื่องราว
• 4. description: คำอธิบายสั้นๆ ของเรื่องราว
• 5. createdBy: ผู้สร้างหรือผู้เขียนเรื่องราว
• 6. imageCredit: เครดิตสำหรับรูปภาพหลัก
• 7. cameraOptions: การตั้งค่ากล้องเริ่มต้นสำหรับเรื่องราวทั้งหมด

ส่วนเนื้อหา

เรื่องราวจะแบ่งออกเป็นส่วนเนื้อหา โดยแต่ละส่วนจะมีชุดตัวแปรของตัวเอง คุณสร้างส่วนเนื้อหาได้มากเท่าที่ต้องการ โดยเริ่มต้นด้วยการเลือกที่อยู่ แล้วเพิ่มรายละเอียดต่อไปนี้ลงในส่วนเนื้อหา

ใช้แอปผู้ดูแลระบบ

การค้นหาสถานที่ตั้ง: ใช้แถบค้นหาการเติมข้อความอัตโนมัติของ Google Maps Platform ที่ผสานรวม เพื่อค้นหาสถานที่ตั้งที่ต้องการแสดง

เมื่อเพิ่มสถานที่ตั้งแล้ว คุณสามารถเพิ่มรายละเอียดลงในส่วนเนื้อหาได้โดยคลิกปุ่มแก้ไข ข้างสถานที่ตั้ง

เพิ่มรายละเอียดเกี่ยวกับสถานที่ตั้ง

เมื่อพอใจกับการกำหนดค่าโดยรวมแล้ว ให้ดาวน์โหลดไฟล์ JSON แล้วคุณจะใช้ไฟล์ดังกล่าวในแอปเดโมได้

กำหนดค่าโดยใช้ config.json

คุณสามารถแก้ไขตัวแปรต่อไปนี้ในไฟล์ config.json ที่ดาวน์โหลดมาได้โดยตรงเพื่อปรับแต่งแต่ละส่วนเนื้อหา

• title: ชื่อเรื่องของส่วนเนื้อหา
• id: ตัวระบุที่ไม่ซ้ำกันสำหรับส่วนเนื้อหา
• imageUrl: URL ของรูปภาพของส่วนเนื้อหา
• imageCredit: เครดิตสำหรับรูปภาพของส่วนเนื้อหา
• content: เนื้อหาข้อความสำหรับส่วนเนื้อหา
• dateTime: วันที่หรือกรอบเวลาที่เฉพาะเจาะจงสำหรับส่วนเนื้อหา
• coords: พิกัดสำหรับสถานที่ตั้งที่เชื่อมโยงกับส่วนเนื้อหา
  • lat: ละติจูด
  • lng: ลองจิจูด
• address: ที่อยู่ที่เกี่ยวข้องกับส่วนเนื้อหา

การตั้งค่ากล้อง

แอปพลิเคชันมีตัวควบคุมกล้องที่หลากหลาย ส่วนนี้จะแนะนำการตั้งค่ากล้องต่างๆ และวิธีปรับแต่งการตั้งค่าเหล่านั้น

(แพน,ซูม, เอียงกล้องเพื่อให้ได้มุมมองที่สมบูรณ์แบบ)

ใช้แอปผู้ดูแลระบบ

กล้อง: ปรับความเร็วการเคลื่อนไหวของกล้องและประเภทการหมุนรอบเพื่อให้ได้ประสบการณ์การรับชมที่เลือก

• เครื่องหมายระบุตำแหน่ง ช่วยให้คุณสลับระหว่างการแสดงหมุดในสถานที่ตั้งที่เฉพาะเจาะจงกับการซ่อนหมุด

• โฟกัสรัศมี จะสร้างเงาแบบวิกเน็ตต์รอบๆ พื้นที่ที่เฉพาะเจาะจงโดยไม่ระบุสถานที่ตั้งที่แน่ชัด ซึ่งเหมาะอย่างยิ่งสำหรับการแสดงย่านใกล้เคียงหรือพื้นที่ทั่วไป

แสดงวิธีเปลี่ยนโฟกัสของกล้องเพื่อแสดงพื้นที่แทนที่จะเป็นจุดที่เฉพาะเจาะจง

ใช้ config.json

นอกจากนี้ คุณยังปรับแต่งพารามิเตอร์กล้องทั้งหมดได้โดยตรงโดยใช้ไฟล์การกำหนดค่า JSON

• cameraOptions: การตั้งค่ากล้องสำหรับส่วนเนื้อหา (ดูข้อมูลเพิ่มเติมเกี่ยวกับ กล้อง มุม)

  • position: พารามิเตอร์ตำแหน่งจะกำหนดพิกัดเชิงพื้นที่ของกล้องในสภาพแวดล้อม 3 มิติ โดยประกอบด้วยค่า 3 ค่า ได้แก่ x, y และ z พิกัดแต่ละรายการแสดงถึงจุดในแกน x, y และ z ซึ่งกำหนดตำแหน่งของกล้อง

  • heading: พารามิเตอร์ทิศทางจะอ้างอิงถึงทิศทางแนวนอนที่กล้องชี้ไป ในทางภูมิศาสตร์ พารามิเตอร์นี้แสดงถึงมุมระหว่างมุมมองของกล้องกับทิศเหนือ ทิศทาง 0 องศาแสดงว่ากล้องชี้ไปทางทิศเหนือ

  • pitch: พารามิเตอร์มุมก้มเงยจะกำหนดมุมแนวตั้งของกล้อง โดยแสดงถึงการเอียงหรือความชันของมุมมองกล้อง มุมก้มเงยที่เป็นบวกจะมองลง ส่วนมุมก้มเงยที่เป็นลบจะมองขึ้น

  • roll: พารามิเตอร์การหมุนจะกำหนดการหมุนรอบแกนของกล้อง โดยแสดงถึงการเคลื่อนไหวแบบบิดของกล้อง การหมุน 0 องศาแสดงว่าไม่มีการหมุน ส่วนค่าบวกหรือค่าลบจะแสดงถึงการหมุนไปทางขวาหรือซ้ายตามลำดับ

• focusOptions: ตัวเลือกสำหรับการโฟกัสที่จุดที่เฉพาะเจาะจง

• focusRadius: รัศมีสำหรับการโฟกัส

• showFocus: บูลีนเพื่อแสดงหรือซ่อนโฟกัส

• showLocationMarker: บูลีนเพื่อแสดงหรือซ่อนเครื่องหมายระบุตำแหน่ง

บันทึกการกำหนดค่า

สุดท้าย ให้คลิก บันทึกตำแหน่งกล้อง เพื่อบันทึกตำแหน่งกล้อง แล้วคลิก ออกจากโหมดแก้ไข เพื่อบันทึกงาน

แอปพลิเคชันนี้มีอินเทอร์เฟซที่ใช้งานง่ายซึ่งช่วยให้คุณปรับแต่งประสบการณ์ 3 มิติได้ ซึ่งก็คือแอปผู้ดูแลระบบ

config.json สุดท้าย

ไฟล์ config.json สุดท้ายจะมีข้อมูลทั้งหมดที่จำเป็นในการสร้างประสบการณ์การเล่าเรื่องที่กำหนดเอง ซึ่งรวมถึงรายละเอียดหน้าปก ส่วนเนื้อหา และการตั้งค่ากล้อง คุณสามารถใช้ไฟล์นี้เพื่อปรับแต่งเรื่องราวและตรวจสอบว่าเรื่องราวมีลักษณะและให้ความรู้สึกตรงกับที่คุณต้องการ

หากต้องการเริ่มต้นใช้งาน ให้ดาวน์โหลดไฟล์ config.json จากแอปผู้ดูแลระบบหรือสร้างไฟล์ใหม่ตั้งแต่ต้น จากนั้นเปิดไฟล์ในเครื่องมือแก้ไขข้อความและเริ่มแก้ไขค่า คุณสามารถเปลี่ยนข้อความ รูปภาพ และแม้แต่การตั้งค่ากล้องเพื่อสร้างประสบการณ์ที่ไม่เหมือนใครและสมจริงสำหรับผู้ชม

ไฟล์ JSON ภาพรวมเรื่องราวอาจมีลักษณะดังนี้

{
  "properties": {
    "imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/317-300x160.jpg",
    "title": "Title",
    "date": "1967",
    "description": ""his is where you put descriptions",
    "createdBy": "Add author",
    "imageCredit": "Add image credit",
    "cameraOptions": {
      "position": {
        "x": -2708127.031960028,
        "y": -4260747.583520751,
        "z": 3886346.825328216
      },
      "heading": -1.5708,
      "pitch": -0.785398,
      "roll": 0
    }
  }

และส่วนเนื้อหาที่เฉพาะเจาะจงอาจมีลักษณะดังนี้ ส่วนเนื้อหาเป็นอาร์เรย์และสามารถมีส่วนเนื้อหาแต่ละส่วนจำนวนมากภายในอาร์เรย์ได้

"chapters": [
    {
      "title": "The Jimmy Hendrix Experience",
      "id": 4,
      "imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/401-300x160.jpg",
      "imageCredit": "Hunter",
      "content": "XYZZZ",
      "dateTime": "Aug 10-12 1967",
      "coords": {
        "lat": 37.7749,
        "lng": -122.4194
      },
      "address": "The Filmore | 1805 Geary Blvd",
      "cameraOptions": {
        "position": {
          "x": -2706472.5713478313,
          "y": -4261528.277488908,
          "z": 3885143.750529967
        },
        "heading": 0,
        "pitch": 0,
        "roll": 0
      },
      "focusOptions": {
        "focusRadius": 3000,
        "showFocus": false,
        "showLocationMarker": true
      }
    },

การปรับแต่งขั้นสูง

คุณสามารถเจาะลึกโค้ดและทำการปรับแต่งอื่นๆ ได้หลายอย่าง

โหลดไฟล์การกำหนดค่าจากตำแหน่งอื่น

โซลูชันจะโหลดการกำหนดค่าการเล่าเรื่องจาก ไฟล์ในเครื่องโดยค่าเริ่มต้น แต่คุณสามารถเปลี่ยนการกำหนดค่านี้ได้อย่างง่ายดายใน config.js

export async function loadConfig(configUrl) {
  try {
    // Fetch the configuration data from the specified URL.
    const configResponse = await fetch(configUrl);

การกำหนดค่ากล้อง

คุณสามารถปรับแต่งกล้องเพิ่มเติมได้จากไฟล์ /utils/cesium.js ซึ่งกำหนดตัวแปรที่สำคัญหลายรายการ เช่น

• RADIUS
• BASE_PITCH_RADIANS
• BASE_HEADING_RADIANS
• BASE_ROLL_RADIANS
• DEFAULT_HIGHLIGHT_RADIUS

คุณสามารถปรับตัวแปรเหล่านี้เพื่อรับมุมกล้องและประสบการณ์ต่างๆ ได้ตามต้องการ

บทสรุป

ในเอกสารนี้ เราได้ให้คำแนะนำในการปรับแต่งแอปพลิเคชันการเล่าเรื่องแบบ 3 มิติ เราได้สำรวจตัวเลือกต่างๆ ที่มีอยู่ในแอปผู้ดูแลระบบและวิธีใช้ตัวเลือกเหล่านั้นเพื่อสร้างเรื่องราวเกี่ยวกับตำแหน่งทางภูมิศาสตร์ที่สมจริงและน่าสนใจ นอกจากนี้ เรายังได้พูดถึงกระบวนการสร้างเรื่องราวที่กำหนดเองโดยใช้ไฟล์ config.json ขั้นตอนถัดไป

เมื่อทราบวิธีปรับแต่งแอปพลิเคชันการเล่าเรื่องแบบ 3 มิติแล้ว คุณก็เริ่มสร้างเรื่องราวของคุณเองได้ ต่อไปนี้เป็นแนวคิดบางส่วนที่จะช่วยให้คุณเริ่มต้นใช้งาน

• สร้างเรื่องราวเกี่ยวกับบ้านเกิดหรือสถานที่ที่เคยไป
• สร้างเรื่องราวเกี่ยวกับเหตุการณ์ทางประวัติศาสตร์หรือบุคคลที่สร้างแรงบันดาลใจให้คุณ
• สร้างเรื่องราวเกี่ยวกับโลกสมมติหรือความฝันที่คุณเคยฝัน

ทุกอย่างเป็นไปได้ ดังนั้นจงปล่อยให้จินตนาการของคุณโลดแล่นและสร้างสรรค์สิ่งพิเศษ