บทนำ
คู่มือนี้จะแนะนำให้คุณรู้จักวิธีต่างๆ ที่โซลูชันการเล่าเรื่องแบบ 3 มิติสามารถ สามารถปรับแต่งได้ ซึ่งทำให้คุณสามารถสร้างเรื่องราวตำแหน่งทางภูมิศาสตร์ที่น่าสนใจ
คุณมีความยืดหยุ่นในการกำหนดค่าโซลูชันการเล่าเรื่องผ่าน โดยใช้ได้สะดวก คุณสามารถใช้ UI ที่ใช้งานง่ายที่มีอยู่ใน แอปผู้ดูแลระบบที่มีแผงการกำหนดค่าโดยเฉพาะ ภายในแผงนี้ ผู้ใช้สามารถ แก้ไขคุณสมบัติหลัก เช่น imageUrl, ชื่อ, วันที่ เป็นต้น สำหรับทั้งเรื่องราวโดยรวม และส่วนเนื้อหาแต่ละตอน
ประการที่ 2 คุณสามารถปรับแต่งการตั้งค่ากล้องและตัวเลือกโฟกัสสำหรับแต่ละอุปกรณ์ บทที่ใช้ GUI ในแอป Admin เมื่อพอใจกับการกำหนดค่าแล้ว ผู้ใช้จะมีตัวเลือกในการดาวน์โหลดไฟล์ JSON ที่สร้างขึ้น
หรือคุณจะแก้ไขไฟล์ JSON โดยตรงก็ได้ คุณสามารถปรับโครงสร้าง JSON, โหลดโซลูชันการเล่าเรื่องที่กำหนดค่าแล้ว และข้ามแผงควบคุมของผู้ดูแลระบบ การใช้ทั้ง 2 วิธีนี้ใช้ทั้ง อินเทอร์เฟซที่ใช้งานง่ายและการจัดการ JSON ขั้นสูง
วิธีเริ่มต้นใช้งาน
เปิดใช้
สร้างเรื่องราวของคุณเอง
เลย์เอาต์โดยรวมของเรื่องราวจะแบ่งเป็นเรื่องราวคัฟเวอร์ตามด้วยบทต่างๆ
คุณปรับแต่งทั้งหน้าปกและบทแยกกันได้ ลองดู
รายละเอียดเกี่ยวกับวิธีสร้างและปรับแต่งเรื่องราวโดยใช้ทั้งแอป 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 มิติแล้ว คุณก็ ก็เริ่มสร้างเรื่องราวของคุณเองได้ แนวคิดเล็กๆ น้อยๆ ที่จะช่วยในการเริ่มต้นใช้งานมีดังนี้
- สร้างเรื่องราวเกี่ยวกับบ้านเกิดของคุณหรือสถานที่ที่เคยไป
- สร้างเรื่องราวเกี่ยวกับเหตุการณ์ทางประวัติศาสตร์หรือบุคคลที่เป็นแรงบันดาลใจให้คุณ
- สร้างเรื่องราวเกี่ยวกับโลกที่แต่งขึ้นหรือความฝันที่คุณมี
ทุกอย่างเป็นไปได้ ปลดปล่อยจินตนาการให้โลดแล่นและสร้างสรรค์ เป็นอะไรที่พิเศษจริงๆ