Giới thiệu
Hướng dẫn này sẽ trình bày các cách tuỳ chỉnh giải pháp Kể chuyện 3D nhằm giúp bạn tạo ra những câu chuyện có vị trí địa lý hấp dẫn.
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 pháp tiện lợi. Chính vì vậy, 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ị, với 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 tháng và các thuộc tính khác, cho cả tổng thể câu chuyện và từng phân cảnh.
Thứ hai, bạn có thể tinh chỉnh các chế độ cài đặt máy ảnh và lựa chọn lấy nét cho từng phân cảnh bằng cách sử dụng GUI trong ứng dụng Quản trị viên. Sau khi hài lòng với cấu hì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 vừa mang lại một giao diện thân thiện với người dùng vừa mang lại 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 bìa theo sau là các chương.
Bạn có thể tuỳ chỉnh riêng cả bìa sách và chương. Xem
thông tin chi tiết về cách tạo và tuỳ chỉnh 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 của mình. Thao tác này sẽ thêm thông tin tổng quan, ảnh bìa và nội dung mô tả cho câu chuyện của bạn.
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ể làm việc đó trong ứng dụng Quản trị bằng màn hình sau:
Dùng tệp config.json
Ngoài ra, nếu có tệp cấu hình, bạn có thể thêm trực tiếp 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, gif hoặc video) cho toàn bộ câu chuyện.
Đây có thể là bất kỳ URL nào có thể truy cập công khai trỏ đến tệp hình ảnh, ảnh GIF hoặc video mà bạn muốn sử dụng làm nội dung nghe nhìn chính cho toàn bộ câu chuyện.
- 2.
title: Tên toàn bộ câu chuyện. - 3.
date: Ngày hoặc khung thời gian của câu chuyện. - 4.
description: Mô tả ngắn gọn về câu chuyện. - 5.
createdBy: Người tạo hoặc tác giả của câu chuyện. - 6.
imageCredit: Thông tin ghi nhận tác giả 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 bộ biến riêng. Bạn có thể tạo bao nhiêu phân cảnh tuỳ thích. Bạn bắt đầu bằng cách chọn một địa chỉ rồi thêm các thông tin chi tiết sau đây vào chương.
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 của Nền tảng Google Maps được tích hợp để tìm vị trí bạn muốn hiển thị.
Sau khi thêm một vị trí, 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 Edit (Chỉnh sửa) bên cạnh vị trí đó:
Thêm thông tin chi tiết về vị trí:
Khi đã hài lòng với cấu hình tổng thể, hãy tải tệp json xuống và sử dụng trong ứng dụng minh hoạ.
Định cấu hình bằng cách sử dụ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 hình ảnh của chương.imageCredit: Ghi nhận quyền tác giả cho hình ảnh của phân cảnh này.content: Nội dung văn bản của chương.dateTime: Ngày hoặc khung thời gian của chương đó.coords: Toạ độ của vị trí liên kết với chương này.lat: Vĩ độ.lng: Kinh độ.
address: Địa chỉ liên quan đến phân cảnh này.
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 hướng dẫn bạn về các chế độ cài đặt khác nhau của máy ảnh và cách tuỳ chỉnh các chế độ cài đặt đó.
(Kéo,thu phóng, nghiêng máy ảnh để có góc xem hoàn hảo)
Dùng ứng dụng Quản trị
Camera: Điều chỉnh tốc độ chuyển động của camera và loại quỹ đạo để tạo trải nghiệm xem do bạn chọn.
Điểm đánh dấu vị trí cho phép bạn hiện hoặc ẩn ghim ở một vị trí cụ thể.
Tiêu điểm bán kính tạo bóng mờ viền xung quanh một khu vực cụ thể mà không cần ghim một vị trí cụ thể. Đây là lựa chọn tuyệt vời để hiển thị vùng lân cận hoặc khu vực khái quát.
Hình này cho biết 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ể.
Dùng tệp config.json
Bạn cũng có thể tuỳ chỉnh trực tiếp tất cả các tham số máy ảnh bằng cách sử dụng tệp cấu hình json:
cameraOptions: Chế độ cài đặt camera cho phân cảnh. (tìm hiểu thêm về góc máy ảnh)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 các trục x, y và z giúp xác định vị trí của camera.heading: Tham số tiêu đề đề cập đến hướng ngang mà máy ảnh nhắm vào. Về mặt địa lý, giá trị này biểu thị góc giữa góc nhìn của camera và hướng bắc. Tiêu đề 0 cho biết máy ảnh đang hướng về phía bắc.pitch: Thông số cao độ xác định góc dọc của camera. Thuộc tính này biểu thị độ nghiêng hoặc độ nghiêng của góc nhìn của camera. Điểm cao độ dương nhìn xuống dưới, trong khi độ cao âm hướng lên trên.roll: Tham số cuộn xác định chế độ xoay xung quanh trục của máy ảnh. Thuộc tính này thể hiện chuyển động xoay của camera. Khi cuộn 0 biểu thị chế độ không xoay, trong khi giá trị dương hoặc âm biểu thị chế độ xoay sang phải hoặc trái tương ứng.
focusOptions: Các lựa chọn để tập trung vào một điểm cụ thể.focusRadius: Bán kính cho tiêu điểm.showFocus: Boolean để hiện hoặc ẩn tiêu điểm.showLocationMarker: Boolean để hiện hoặc ẩn điểm đánh dấu vị trí.
Lưu cấu hình của bạn
Cuối cùng, hãy nhấp vào Save camera location (Lưu vị trí máy ảnh) để lưu vị trí máy ảnh, rồi nhấp vào Rời khỏi chế độ chỉnh sửa để lưu công việc
Ứ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ị.
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 theo ý bạn. Phần này bao gồm chi tiết trang bìa, phân cảnh và cài đặt máy ảnh. 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 câu chuyện có giao diện chính xác như bạn 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 đó, mở tệp trong 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í cả chế độ cài đặt máy ảnh để tạo ra trải nghiệm độc đáo và sống động cho khán giả.
Tệp json tổng quan của 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 phân cảnh cụ thể có thể như thế này. Phân cảnh là một mảng và có thể gồm nhiều chương 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 chi tiết về mã và thực hiện một vài 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 camera
Bạn có thể tuỳ chỉnh thêm máy ảnh từ tệp /utils/cesium.js.
Thẻ này xác định một số biến quan trọng như:
- Bán kính
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Hãy thoải mái điều chỉnh các biến này để có được nhiều thiên thần và trải nghiệm máy ảnh khác nhau.
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á các tuỳ chọn khác nhau có sẵn trong ứng dụng Quản trị và cách sử dụng các tuỳ chọn đó để tạo những câu chuyện có thông tin định vị vị trí 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 đã học cách tuỳ chỉnh ứng dụng Kể chuyện 3D, bạn có thể bắt đầu tạo những câu chuyện của riêng mình. Dưới đây là một số ý tưởng giúp bạn bắt đầu:
- Tạo một câu chuyện về quê nhà hoặc đị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ề thế giới hư cấu hoặc giấc mơ của bạn.
Bạn có vô số lựa chọn! Vì vậy, hãy để trí tưởng tượng của bạn bay cao và tạo ra điều gì đó thực sự đặc biệt.