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 phương thức 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 toàn bộ 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 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 chủ đề, 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 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 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 đ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 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 câu chuyện.
  • 6. imageCredit: Tín dụ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 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 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 đó:

hình ảnh

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 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: Vĩ độ.
  • 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ó đượ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 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ể 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 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 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ý, 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ố độ dốc 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. Đáp cao độ dương nhìn xuống, trong khi điểm đề cử âm hướng lê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. 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 tiêu điểm.

  • 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

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

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. 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ể 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í 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
    }
  }

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ừ 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 camera từ tệp /utils/cesium.js. Định nghĩa 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 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ị và cách sử dụng các tuỳ chọn đó để tạo các 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 tệp. 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 số ý 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 một thứ gì đó thực sự đặc biệt.