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

เกริ่นนำ

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

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

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

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

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

เปิดใช้

• API ชิ้นส่วนภาพ 3 มิติแบบสมจริง
• Places API

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

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

หน้าปก

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

ใช้แอป Admin

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

ใช้ config.json

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

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

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

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

ส่วนเนื้อหา

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

ใช้แอป Admin

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

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

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

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

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

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

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

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

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

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

ใช้แอป Admin

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

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

• โฟกัสตามรัศมีสร้างเงาขอบมืดรอบพื้นที่เฉพาะโดยไม่ระบุตำแหน่งที่เจาะจง เหมาะมากในการแสดงย่าน หรือพื้นที่ทั่วไป

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

ใช้ config.json

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

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

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

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

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

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

• focusOptions: ตัวเลือกสำหรับการโฟกัส ณ จุดใดจุดหนึ่ง

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

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

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

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

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

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

config.json สุดท้าย

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

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

ไฟล์ 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 โดยจะกำหนดตัวแปรสำคัญจำนวนมาก เช่น

• รัศมี
• BASE_PITCH_RADIANS
• BASE_HEADING_RADIANS
• BASE_ROLL_RADIANS
• DEFAULT_HIGHLIGHT_RADIUS

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

บทสรุป

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

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

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

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