Giới thiệu
Hướng dẫn này sẽ hướng dẫn bạn các cách tuỳ chỉnh giải pháp Kể chuyện 3D, cho phép bạn tạo những câu chuyện hấp dẫn về vị trí địa lý.
Bạn có thể linh hoạt định cấu hình giải pháp kể chuyện của họ thông qua hai phương thức thuận tiện. Trước tiên, bạn có thể sử dụng giao diện người dùng trực quan có trong ứng dụng Quản trị viên, trong đó có một bảng điều khiển cấu hình chuyên dụng. Trong bảng điều khiển này, người dùng có thể sửa đổi các thuộc tính chính như imageUrl, tiêu đề, ngày và nhiều thuộc tính khác, cả cho toàn bộ câu chuyện và từng chương riêng lẻ.
Thứ hai, bạn có thể tinh chỉnh các chế độ cài đặt máy ảnh và tuỳ chọn lấy nét cho từng chương bằng cách sử dụng giao diện người dùng đồ hoạ trong ứng dụng Quản trị. Sau khi hài lòng với cấu hình của mình, người dùng có thể tải tệp JSON đã tạo xuống.
Ngoài ra, bạn có thể trực tiếp chỉnh sửa tệp JSON. Bạn có thể điều chỉnh cấu trúc JSON, tải giải pháp kể chuyện đã định cấu hình và bỏ qua Bảng điều khiển dành cho quản trị viên. Phương pháp kép này cung cấp cả giao diện thân thiện với người dùng và thao tác JSON nâng cao.
Bắt đầu:
Bật
Tạo câu chuyện của riêng bạn
Bố cục tổng thể của câu chuyện được chia thành một câu chuyện trên trang bìa, theo sau là các chương.
Bạn có thể tuỳ chỉnh riêng cả bìa sách và một chương. Hãy xem
thông tin chi tiết về cách tạo và tuỳ chỉnh các câu chuyện bằng cả ứng dụng Quản trị viên
cũng như tệp cấu hình.
Trang bìa
Việc đầu tiên bạn cần làm là tạo trang bìa cho toàn bộ câu chuyện. Thao tác này sẽ thêm thông tin tổng quan, ảnh bìa và nội dung mô tả vào câu chuyện của bạn.
Sử dụng ứng dụng Quản trị
Bạn bắt đầu bằng cách thêm trang bìa cho câu chuyện của mình. Bạn có thể thực hiện việc này trong ứng dụng Quản trị bằng màn hình sau:
Sử dụng config.json
Ngoài ra, nếu có tệp cấu hình, bạn có thể trực tiếp thêm các phần sau vào tệp:
- 1.
imageUrl: URL của tệp nội dung nghe nhìn chính (hình ảnh, ảnh gif hoặc video) cho toàn bộ tin stories.
Đây có thể là bất kỳ URL nào có thể truy cập công khai trỏ đến một tệp hình ảnh, gif hoặc video mà bạn muốn dùng làm nội dung nghe nhìn chính cho toàn bộ câu chuyện.
- 2.
title: Tiêu đề của toàn bộ câu chuyện. - 3.
date: Ngày hoặc khung thời gian liên kết với tin bài. - 4.
description: Nội dung mô tả ngắn về câu chuyện. - 5.
createdBy: Người tạo hoặc tác giả của tin bài. - 6.
imageCredit: Thông tin ghi công cho hình ảnh chính. - 7.
cameraOptions: Chế độ cài đặt máy ảnh ban đầu cho toàn bộ câu chuyện.
Phân cảnh
Câu chuyện được chia thành các chương, mỗi chương có một tập hợp biến riêng. Bạn có thể tạo bao nhiêu chương tuỳ thích. Bạn bắt đầu bằng cách chọn một địa chỉ, sau đó thêm các thông tin chi tiết sau vào chương.
Sử dụng ứng dụng Quản trị
Tìm kiếm vị trí: Sử dụng thanh tìm kiếm Tự động hoàn thành tích hợp của Nền tảng Google Maps để tìm vị trí bạn muốn hiển thị.
Sau khi thêm một địa điểm, bạn có thể thêm thông tin chi tiết vào chương bằng cách nhấp vào nút Chỉnh sửa bên cạnh địa điểm đó:
Thêm thông tin chi tiết về vị trí:
Khi bạn hài lòng với cấu hình tổng thể, hãy tải tệp json xuống và bạn có thể sử dụng tệp đó trong ứng dụng minh hoạ.
Định cấu hình bằng config.json
Bạn có thể chỉnh sửa các biến sau ngay trong tệp config.json đã tải xuống để tuỳ chỉnh từng chương:
title: Tiêu đề của chương.id: Giá trị nhận dạng duy nhất của chương.imageUrl: URL của hình ảnh trong chương.imageCredit: Thông tin ghi công cho hình ảnh của chương.content: Nội dung văn bản cho chương.dateTime: Ngày hoặc khung thời gian cụ thể cho chương.coords: Toạ độ của vị trí liên kết với chương.lat: Vĩ độ.lng: Vĩ độ.
address: Địa chỉ liên quan đến chương.
Cài đặt camera
Ứng dụng này cung cấp nhiều chế độ điều khiển khác nhau trên máy ảnh. Phần này sẽ hướng dẫn bạn các chế độ cài đặt máy ảnh và cách tuỳ chỉnh các chế độ đó.
(Xoay,thu phóng, nghiêng máy ảnh để có được góc nhìn hoàn hảo)
Sử dụng ứng dụng Quản trị
Camera (Máy ảnh): Điều chỉnh tốc độ di chuyển của máy ảnh và loại quỹ đạo để tạo ra trải nghiệm xem đã chọn.
Điểm đánh dấu vị trí cho phép bạn bật/tắt chế độ hiển thị hoặc ẩn ghim ở một vị trí cụ thể.
Tiêu điểm bán kính tạo ra bóng mờ xung quanh một khu vực cụ thể mà không cần xác định vị trí cụ thể. Đây là cách hiệu quả để giới thiệu một khu dân cư hoặc khu vực chung.
Hình ảnh này cho thấy cách thay đổi tiêu điểm của máy ảnh để hiển thị một khu vực thay vì một điểm cụ thể.
Sử dụng config.json
Bạn cũng có thể tuỳ chỉnh tất cả các thông số của máy ảnh ngay bằng cách sử dụng tệp cấu hình json:
cameraOptions: Chế độ cài đặt máy ảnh cho chương. (tìm hiểu thêm về góc máy quay)position: Tham số vị trí xác định toạ độ không gian của máy ảnh trong môi trường 3D. Nó bao gồm ba giá trị: x, y và z. Mỗi toạ độ đại diện cho một điểm trong trục x, y và z, xác định vị trí của máy ảnh.heading: Tham số hướng đề cập đến hướng ngang mà máy ảnh hướng đến. Về mặt địa lý, góc này thể hiện góc giữa khung hình của máy ảnh và hướng bắc. Tiêu đề 0 cho biết máy ảnh đang hướng về phía bắc.pitch: Tham số độ dốc xác định góc dọc của camera. Giá trị này biểu thị độ nghiêng hoặc độ dốc của khung hình máy ảnh. Độ cao dương hướng xuống dưới, trong khi độ cao âm hướng lên trên.roll: Tham số độ nghiêng xác định độ xoay xung quanh trục của máy ảnh. Giá trị này biểu thị chuyển động xoắn của máy ảnh. Giá trị 0 cho biết không có độ nghiêng, trong khi giá trị dương hoặc âm lần lượt biểu thị độ nghiêng sang phải hoặc sang trái.
focusOptions: Các tuỳ chọn để lấy nét vào một điểm cụ thể.focusRadius: Bán kính tiêu điểm.showFocus: Boolean để hiển thị hoặc ẩn tiêu điểm.showLocationMarker: Boolean để hiển thị hoặc ẩn điểm đánh dấu vị trí.
Lưu cấu hình
Cuối cùng, hãy nhấp vào Lưu vị trí máy ảnh để lưu vị trí máy ảnh, sau đó nhấp vào Thoát chế độ chỉnh sửa để lưu công việc của bạn
Ứng dụng này cung cấp giao diện thân thiện với người dùng, cho phép bạn tuỳ chỉnh trải nghiệm 3D. Đây là ứng dụng Quản trị.
tệp config.json cuối cùng
Tệp config.json cuối cùng chứa tất cả thông tin cần thiết để tạo trải nghiệm kể chuyện tuỳ chỉnh. Thông tin này bao gồm thông tin chi tiết về trang bìa, các chương và chế độ cài đặt máy quay. Bạn có thể sử dụng tệp này để tinh chỉnh câu chuyện của mình và đảm bảo rằng câu chuyện đó trông giống như bạn mong muốn.
Để bắt đầu,hãy tải tệp config.json xuống từ ứng dụng Quản trị hoặc tạo một tệp mới từ đầu. Sau đó, hãy mở tệp đó trong một trình chỉnh sửa văn bản và bắt đầu chỉnh sửa các giá trị. Bạn có thể thay đổi văn bản, hình ảnh và thậm chí là chế độ cài đặt máy ảnh để tạo trải nghiệm độc đáo và sống động cho khán giả.
Tệp json tổng quan về câu chuyện có thể có dạng như sau:
{
"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
}
}
Và một chương cụ thể có thể có dạng như sau. Chapters là một mảng và có thể chứa nhiều phân cảnh riêng lẻ bên trong mảng.
"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
}
},
Tuỳ chỉnh nâng cao
Bạn có thể tìm hiểu mã và có thể thực hiện một số tuỳ chỉnh khác:
Tải tệp cấu hình từ một vị trí khác
Ngay từ đầu, giải pháp này sẽ tải cấu hình kể chuyện từ một tệp cục bộ . Tuy nhiên, bạn có thể dễ dàng thay đổi điều này trong config.js:
export async function loadConfig(configUrl) {
try {
// Fetch the configuration data from the specified URL.
const configResponse = await fetch(configUrl);
Cấu hình máy ảnh
Bạn có thể tuỳ chỉnh thêm máy ảnh từ tệp /utils/cesium.js.
Tệp này xác định một số biến quan trọng như:
- RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Bạn có thể điều chỉnh các biến này để có nhiều góc máy và trải nghiệm.
Kết luận
Trong tài liệu này, chúng tôi đã cung cấp hướng dẫn tuỳ chỉnh ứng dụng Kể chuyện 3D. Chúng ta đã khám phá nhiều lựa chọn có trong ứng dụng Quản trị và cách sử dụng các lựa chọn đó để tạo các câu chuyện vị trí địa lý sống động và hấp dẫn. Chúng ta cũng đã thảo luận về quy trình tạo một câu chuyện tuỳ chỉnh bằng tệp config.json. Các bước tiếp theo
Giờ đây, khi đã tìm hiểu cách tuỳ chỉnh ứng dụng Kể chuyện 3D, bạn có thể bắt đầu tạo câu chuyện của riêng mình. Dưới đây là một số ý tưởng để bạn bắt đầu:
- Tạo một câu chuyện về quê hương của bạn hoặc một địa điểm bạn đã ghé thăm.
- Tạo một câu chuyện về một sự kiện lịch sử hoặc một người đã truyền cảm hứng cho bạn.
- Tạo một câu chuyện về một thế giới hư cấu hoặc một giấc mơ bạn từng có.
Bạn có vô số lựa chọn! Vì vậy, hãy để trí tưởng tượng của bạn bay xa và tạo ra một thứ gì đó thực sự đặc biệt.