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