Kể chuyện 3d: hướng dẫn tuỳ chỉnh

Giới thiệu

Hướng dẫn này sẽ giới thiệu cho bạn nhiều cách tuỳ chỉnh giải pháp Kể chuyện 3D, cho phép bạn tạo các câu chuyện hấp dẫn về định vị vị trí.

Bạn có thể linh hoạt định cấu hình giải pháp kể chuyện thông qua 2 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ị, có bảng điều khiển cấu hình riê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 cho cả câu chuyện tổng thể và từng phân cảnh.

Thứ hai, bạn có thể tinh chỉnh chế độ cài đặt camera và các lựa chọn tiêu điểm cho từng phân cảnh bằng cách sử dụng GUI trong ứng dụng Quản trị. 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ể chỉnh sửa trực tiếp 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 Quản trị. 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à khả năng 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 trang bìa, tiếp theo là các chương. Bạn có thể tuỳ chỉnh riêng cả trang bìa và một chương. Hãy xem
thông tin chi tiết về cách xây dựng và tuỳ chỉnh câu chuyện bằng cả ứng dụng Quản trị và tệp cấu hình.

Trang bìa

Điều đầu tiên bạn cần làm là tạo một trang bìa cho câu chuyện tổng thể. 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 một trang bìa cho câu chuyện. Bạn có thể thực hiện việc này từ ứng dụng Quản trị bằng màn hình sau:

hình ảnh

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 này vào tệp:

1. imageUrl: URL của tệp phương tiện chính (hình ả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 một tệp hình ảnh, ảnh GIF hoặc video mà bạn muốn sử dụng làm phương tiệ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 câu chuyện.
4. description: Nội dung mô tả ngắn gọn về câu chuyện.
5. createdBy: Người sáng tạo hoặc tác giả của câu chuyện.
6. imageCredit: Thông tin ghi nhận hình ảnh chính.
7. cameraOptions: Chế độ cài đặt camera ban đầu cho toàn bộ câu chuyện.

Phân cảnh

Câu chuyện được chia thành các phân cảnh, mỗi phân cảnh có một tập hợp 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ỉ, sau đó thêm các thông tin chi tiết sau vào phân cảnh.

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 của Google Maps Platform đượ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 phân cảnh bằng cách nhấp vào nút Chỉnh sửa bên cạnh vị trí đó:

hình ảnh

Thêm thông tin chi tiết về vị trí:

Sau khi 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 trực tiếp các biến sau trong tệp config.json đã tải xuống để tuỳ chỉnh từng phân cảnh:

title: Tiêu đề của phân cảnh.
id: Giá trị nhận dạng duy nhất cho phân cảnh.
imageUrl: URL của hình ảnh trong phân cảnh.
imageCredit: Thông tin ghi nhận hình ảnh trong phân cảnh.
content: Nội dung văn bản cho chương.
dateTime: Ngày hoặc khung thời gian dành riêng cho phân cảnh.
coords: Toạ độ cho vị trí liên kết với phân cảnh.
- lat: Vĩ độ.
- lng: Kinh độ.
address: Địa chỉ liên quan đến phân cảnh.

Cài đặt camera

Ứng dụng cung cấp nhiều chế độ điều khiển khác nhau trên camera. Phần này sẽ hướng dẫn bạn các chế độ cài đặt camera khác nhau và cách tuỳ chỉnh các chế độ đó.

hình ảnh

(Xoay,thu phóng, nghiêng camera để có góc nhìn hoàn hảo)

Sử dụng ứng dụng Quản trị

Camera: Điều chỉnh tốc độ di chuyển của camera và loại quỹ đạo để tạo 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ị một ghim ở một vị trí cụ thể.
Tiêu điểm bán kính tạo bóng mờ xung quanh một khu vực cụ thể mà không xác định vị trí cụ thể. Tính năng này rất phù hợp để giới thiệu một khu vực xung quanh hoặc khu vực khái quát.

hình ảnh

Tính năng này cho biết cách thay đổi tiêu điểm của camera để giới thiệu 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 trực tiếp tất cả các tham số của camera bằ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 camera)
- position: Tham số vị trí xác định toạ độ không gian của camera trong môi trường 3D. Tham số này bao gồm 3 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 camera.
- heading: Tham số hướng đề cập đến hướng ngang mà camera đang hướng tới. Về mặt địa lý, tham số này đại diện cho góc giữa góc nhìn của camera và hướng bắc. Hướng 0 cho biết camera đang hướng thẳng về hướng bắc.
- pitch: Tham số độ nghiêng xác định góc dọc của camera. Tham số này biểu thị độ nghiêng của góc nhìn của camera. Độ nghiêng dương hướng xuống, trong khi độ nghiêng âm hướng lên.
- roll: Tham số độ xoay xác định độ xoay quanh trục của camera. Tham số này biểu thị chuyển động xoắn của camera. Độ xoay 0 cho biết không có độ xoay, trong khi các giá trị dương hoặc âm biểu thị độ xoay sang phải hoặc sang trái.
focusOptions: Các lựa chọn để lấy tiêu điểm vào một điểm cụ thể.
focusRadius: Bán kính tiêu điểm.
showFocus: Giá trị boolean để hiển thị hoặc ẩn tiêu điểm.
showLocationMarker: Giá trị 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í camera để lưu vị trí camera, sau đó nhấp vào Rời khỏi chế độ chỉnh sửa để lưu công việc

hình ảnh

Ứng dụng này cung cấp một 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 tuỳ chỉnh. Tệp này bao gồm thông tin chi tiết về trang bìa, các chương và chế độ cài đặt camera. Bạn có thể sử dụng tệp này để tinh chỉnh câu chuyện và đảm bảo câu chuyện trông và cảm thấy đúng 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 đó, 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í cả chế độ cài đặt camera để tạo trải nghiệm độc đáo và chân thực cho khán giả.

Tệp JSON thông tin 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 phân cảnh cụ thể có thể có dạng như sau. Phân cảnh 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ể đi sâu vào mã và thực hiện một số chế độ tuỳ chỉnh khác:

Tải tệp cấu hình từ một vị trí khác

Ngay khi xuất xưởng, giải pháp 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 cấu hình 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 camera 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ể thoải mái điều chỉnh các biến này để có nhiều góc camera và trải nghiệm 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 về cách tuỳ chỉnh ứng dụng Kể chuyện 3D. Chúng tôi đã khám phá các lựa chọn có sẵn 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 hấp dẫn và chân thực về vị trí địa lý. Chúng tôi cũng đã thảo luận về quy trình tạo câu chuyện tuỳ chỉnh bằng tệp config.json. Các bước tiếp theo

Giờ đây, bạn đã 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 vài ý tưởng để bạn bắt đầu:

Tạo một câu chuyện về quê hương hoặc một nơi 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 mơ.

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 một điều gì đó thực sự đặc biệt.

Kể chuyện 3d: hướng dẫn tuỳ chỉnh Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Giới thiệu

Bắt đầu:

Tạo câu chuyện của riêng bạn

Trang bìa

Sử dụng ứng dụng Quản trị

Sử dụng config.json

Phân cảnh

Sử dụng ứng dụng Quản trị

Định cấu hình bằng config.json

Cài đặt camera

Sử dụng ứng dụng Quản trị

Sử dụng config.json

Lưu cấu hình

config.json cuối cùng

Tuỳ chỉnh nâng cao

Tải tệp cấu hình từ một vị trí khác

Cấu hình camera

Kết luận

Kể chuyện 3d: hướng dẫn tuỳ chỉnh