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

บทนำ

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

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

ประการที่ 2 คุณสามารถปรับแต่งการตั้งค่ากล้องและตัวเลือกโฟกัสสำหรับแต่ละบทได้โดยใช้ 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 คืออาร์เรย์และสามารถมีแต่ละบทได้หลายบทภายในอาร์เรย์

"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 มิติแล้ว คุณก็เริ่มสร้างเรื่องราวของคุณเองได้ ต่อไปนี้เป็นตัวอย่างไอเดียในการเริ่มต้นใช้งาน

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

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