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 các cách tuỳ chỉnh giải pháp Kể chuyện 3D, cho phép bạn tạo ra 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. Thứ hai, bạn có thể sử dụng giao diện người dùng trực quan có sẵn trong ứng dụng Quản trị, với một bảng 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à các thuộc tính khác, cho cả câu chuyện tổng thể và từng chương.

Thứ hai, bạn có thể tinh chỉnh các chế độ cài đặt của máy ảnh và các lựa chọn lấy tiêu điểm cho từng chương bằng GUI (Giao diện người dùng đồ hoạ) 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 được 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 tiếp cận 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 chủ đề, theo sau là các chương. Bạn có thể tuỳ chỉnh riêng cả bìa và một chương. Hãy 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ị và tệp cấu hình.

Trang bìa

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

hình ảnh

Sử 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 có thể truy cập công khai nào 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: Tiêu đề của toàn bộ câu chuyện.
  • 3. date: Ngày hoặc khung thời gian liên quan đến tin bài.
  • 4. description: Mô tả ngắn về tin bài.
  • 5. createdBy: Người tạo hoặc tác giả của câu chuyện.
  • 6. imageCredit: Tín dụng cho hình ảnh chính.
  • 7. cameraOptions: Các 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 chương, mỗi chương có những yếu tố 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 những thông tin chi tiết sau đây 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 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 cho chương đó 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 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à sử dụng 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: Tên 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: Tín dụng cho hình ảnh của chương.
  • content: Nội dung văn bản của 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: Kinh độ.
  • address: Địa chỉ liên quan đến chương.

Cài đặt camera

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

hình ảnh

(Xoay,thu phóng, nghiêng máy ảnh để 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 độ chuyển động của camera và loại quỹ đạo để tạo trải nghiệm xem mong muốn.

  • Điểm đánh dấu vị trí cho phép bạn chuyển đổi giữa hiển thị ghim tại một vị trí cụ thể hoặc ẩn ghim.

  • Tiêu điểm theo bán kính sẽ tạo bóng mờ xung quanh một khu vực cụ thể mà không cần xác định vị trí cụ thể. Điều này rất tuyệt để hiển thị vùng lân cận hoặc khu vực khái quát.

hình ảnh

Hình ảnh này cho biết cách thay đổi tiêu điểm của máy ảnh để làm nổi bật một khu vực thay vì một điểm cụ thể.

Sử dụng tệp config.json

Bạn cũng có thể trực tiếp tuỳ chỉnh tất cả các tham số của 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ề các 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. Giá trị này 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ố tiêu đề cho biết hướng ngang mà máy ảnh trỏ đến. Về mặt địa lý, thuộc tính này thể hiện 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ề hướng bắc.

    • pitch: Tham số cao độ xác định góc dọc của camera. Giá trị này biểu thị độ nghiêng hoặc độ nghiêng của góc nhìn của camera. Độ cao âm sẽ hướng xuống dưới, trong khi độ cao âm sẽ hướng lên.

    • roll: Tham số cuộn xác định chế độ xoay xung quanh trục của máy ảnh. Nó biểu thị chuyển động xoắn của camera. Cuộn bằng 0 biểu thị không có thao tác xoay, trong khi giá trị dương hoặc âm biểu thị thao tác 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 để lấy nét.

  • showFocus: Giá trị boolean để hiện 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 của bạn

Cuối cùng, hãy nhấp vào Save camera location (Lưu vị trí camera) để lưu vị trí camera, sau đó nhấp vào Thoát chế độ chỉnh sửa để lưu công việc của bạn

hình ảnh

Ứ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 cho bạn. Phần này bao gồm thông tin chi tiết về trang bìa, phân cảnh và chế độ 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 theo cách bạn muốn.

Để bắt đầu,hãy tải tệp config.json xuống từ ứng dụng Quản trị viên 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 rồi 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ả các chế độ cài đặt của camera để tạo ra 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
    }
  }

Một phân cảnh cụ thể cũng có thể có dạng như thế này. 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ể tìm hiểu kỹ về mã này và thực hiện một số tuỳ chỉnh khác:

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

Ngay từ đầu, giải pháp này 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 camera từ tệp /utils/cesium.js. Định nghĩa này xác định một số biến quan trọng như:

  • RPO
  • 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ó được nhiều thiên thần và trải nghiệm camera 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 ta đã khám phá nhiều tuỳ chọn có sẵn trong ứng dụng Quản trị viên và cách sử dụng các tuỳ chọn đó để tạo những câu chuyện định vị vị trí sống động và hấp dẫn. Chúng tôi 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, sau khi đã học 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 để giúp bạn bắt đầu:

  • Tạo một câu chuyện về quê hương hoặc một địa điểm bạn từng ghé thăm.
  • Tạo 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 câu chuyện về một 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 xa và tạo ra điều gì đó thực sự đặc biệt.