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

Giới thiệu

Hướng dẫn này sẽ chỉ cho bạn các cách khác nhau mà giải pháp Kể chuyện 3D có thể được tuỳ chỉnh, 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 thuận tiện. Thứ năm, 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ị, có một bảng cấu hình chuyên biệt. 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, title, date, v.v. đối với tổng thể câu chuyện lẫn từng chương.

Thứ hai, bạn có thể tinh chỉnh chế độ cài đặt của máy ảnh và chế độ lấy nét cho mỗi bằng giao diện người dùng đồ hoạ trong ứng dụng Quản trị. 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 quản trị. 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. Trả phòng
thông tin chi tiết về cách xây dựng 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 một trang bìa cho câu chuyện của bạ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 một trang bìa cho tin bài của mình. Bạn có thể thực hiện việc đó trong ứ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ể trực tiếp thêm các phần này trong tệp:

  • 1. imageUrl: URL của tệp đa phương tiệ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 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: 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 các 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 tính năng 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 địa điểm, 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à bạn có thể 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 camera và cách tuỳ chỉnh.

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 đã chọn.

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

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

hình ảnh

Hình ảnh này minh hoạ cách thay đổi tiêu điểm của máy ảnh để cho thấy một vùng 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 thông số của máy ảnh bằng cách sử dụng cấu hình json tệp:

  • cameraOptions: Chế độ cài đặt camera cho phân cảnh. (tìm hiểu thêm về máy ảnh góc)

    • position: Tham số vị trí xác định toạ độ không gian của camera 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 camera.

    • heading: Tham số tiêu đề đề cập đến hướng ngang trong chiếc camera hướng vào. Về mặt địa lý, AdSense đại diện cho góc giữa hướng 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: Tham số độ cao xác định góc dọc của máy ảnh. Giá trị này biểu thị độ nghiêng hoặc độ nghiêng của góc nhìn của camera. Đáp cao độ dương nhìn xuống, trong khi điểm đề cử âm hướng lên.

    • roll: Tham số cuộn xác định chế độ xoay xung quanh camera Trục. Thuộc tính này biểu thị chuyển động xoắn của camera. Một cuộn 0 biểu thị không có xoay, trong khi giá trị dương hoặc âm biểu thị xoay sang phải hoặc trái.

  • 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 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 tệp kể chuyện tuỳ chỉnh. Nó bao gồm thông tin chi tiết về trang bìa, chương, và máy ảnh. Bạn có thể dùng tệp này để tinh chỉnh câu chuyện của mình và đảm bảo 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ị hoặc tạo bản dựng 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ả camera để 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
    }
  }

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ể lấy 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ừ 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 tuỳ chỉnh tính nă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 chúng để tạo ra những câu chuyện vị trí địa lý sống động và hấp dẫn. T4 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, bạn đã biết cách tuỳ chỉnh ứng dụng Kể chuyện 3D, bạn có thể bắt đầu tạo tin bài 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à sáng tạo một điều gì đó thực sự đặc biệt.