3D ストーリーテリング: カスタマイズ ガイド

はじめに

このガイドでは、3D ストーリーテリング ソリューションを使用して、 カスタマイズが可能で、魅力的な位置情報ストーリーを作成できます。

ストーリーテリング ソリューションは、 便利です。もう一つは Google Chat の 専用の設定パネルを備えた管理アプリ。このパネルでは imageUrl、title、date などの主要なプロパティの変更 ストーリー全体と個々の章の両方に 目を向けることが重要です

次に、カメラの設定とフォーカス オプションを微調整できます。 管理アプリの GUI を使用してチャプターを追加します。構成に満足したら ユーザーは生成された JSON ファイルをダウンロードできます。

JSON ファイルを直接編集することもできます。 JSON 構造の調整、構成したストーリーテリング ソリューションの読み込み、 管理コントロール パネルを迂回できます。この 2 つのアプローチでは、 JSON の高度な操作が可能です。

ご利用方法:

<ph type="x-smartling-placeholder">

有効にする

独自のストーリーを作成する

ストーリーの全体的なレイアウトは、カバーストーリーとチャプターに分かれています。 表紙と章はどちらも個別にカスタマイズできます。ぜひ
両方の管理アプリを使用してストーリーを作成およびカスタマイズする方法の詳細 構成ファイルも参照します。

カバーページ

まず、全体のカバーページを作成する必要があります 説明します。概要、カバー写真、説明がストーリーに追加されます。

管理アプリを使用

まず、ストーリーのカバーページを追加します。管理アプリから操作できます 次の画面を使用して

画像

config.json を使用する

構成ファイルがある場合は、これらのセクションを 追加します。

  • 1. imageUrl: メインのメディア ファイル（画像、GIF、動画）の URL 説明します。

画像、GIF、動画を指す、一般公開されている任意の URL を指定できます。 ファイルを選択します。

  • 2. title: ストーリー全体のタイトル。
  • 3. date: ストーリーに関連付けられている日付または期間。
  • 4. description: ストーリーの簡単な説明。
  • 5. createdBy: ストーリーの作成者または著者。
  • 6.imageCredit: メイン画像のクレジット。
  • 7. cameraOptions: ストーリー全体のカメラの初期設定。

章

ストーリーは章に分かれており、各章には独自の変数セットがあります。Google Chat では チャプターをいくつでも作成できます。 まず住所を選択してから、次の詳細を 説明します。

管理アプリを使用

場所検索: 統合された Google Maps Platform の Autocomplete 検索を使用 バーをクリックして、表示する場所を見つけます。

場所を追加したら、 撮影場所の横にある [編集] ボタン:

画像

場所の詳細を追加します。

全体的な構成に問題がなければ、json ファイルをダウンロードし、 デモアプリで使用できます

config.json を使用して構成する

ダウンロードした config.json ファイル内で、次の変数を直接編集できます を使用して各チャプターをカスタマイズできます。

  • title: チャプターのタイトル。
  • id: チャプターの一意の識別子。
  • imageUrl: チャプターの画像の URL。
  • imageCredit: チャプターの画像のクレジット。
  • content: チャプターのテキスト コンテンツ。
  • dateTime: 章に固有の日付または期間。
  • coords: チャプターに関連付けられている場所の座標。
    • lat: 緯度。
    • lng: 経度。
  • address: この章に関連する住所。

カメラの設定

このアプリでは、カメラに対してさまざまなコントロールを行えます。このセクション では、カメラのさまざまな設定とカスタマイズ方法について説明します。

画像

（パン、ズーム、傾斜して最適な角度に調整）

管理アプリを使用する

[カメラ]: カメラの移動速度と軌道のタイプを調整して、 おすすめします。

  • 位置マーカー: 特定の場所にピンを表示するかどうかを切り替えることができます。 非表示にしたりすることもできます。

  • 半径フォーカスでは、何も指定せずに特定の領域の周囲に周辺減光のシャドウを作成します。 特定の場所を正確に特定できます近隣地域を紹介するのに最適 おおよその現在地を確認できます

画像

カメラのフォーカスを変更して、 できます。

config.json を使用する

json 設定を使用して、すべてのカメラ パラメータを直接カスタマイズすることもできます。 ファイル:

  • cameraOptions: チャプターのカメラ設定。（詳しくは、カメラ 角）

    • position: position パラメータは、プロジェクトの空間座標を決定します。 3D 環境でカメラを操作できます。x、y、z の 3 つの値で構成されます。 各座標は x 軸、y 軸、z 軸上の点を表し、 カメラの位置を指定します。

    • heading: 方角パラメータは、 カメラが向いている範囲を指定します地理的に言えば カメラの画角と北方向との間の角度。見出し 0 カメラが真北を向いていることを示します。

    • pitch: ピッチ パラメータで、ピッチ パラメータの垂直方向の角度が カメラ。カメラの画角の傾斜や傾きを示します。 ポジティブなピッチは下向きになり、ネガティブなピッチは上向きになります。

    • roll: [Roll] パラメータは、カメラの周りの回転を定義します。 表示されます。カメラのひねりの動きを表します。0 の目 正または負の値は回転がないことを示します。 回転させることもできます。

  • focusOptions: 特定のポイントにフォーカスするためのオプション。

  • focusRadius: フォーカスの半径。

  • showFocus: フォーカスを表示または非表示にするブール値。

  • showLocationMarker: 位置マーカーの表示 / 非表示を切り替えるブール値。

構成を保存する

最後に、[カメラの位置を保存] をクリックしてカメラの位置を保存します。 [編集モードを終了] をクリックして作業内容を保存します。

画像

このアプリケーションのインターフェースはユーザー フレンドリーで、 3D 体験です。管理アプリです。

最後の config.json

最終的な config.json ファイルには、構成ファイルを生成するために必要なすべての情報が含まれています。 カスタム ストーリーテリング エクスペリエンスを創出します。カバーページの詳細、章、 カメラの設定を行います。このファイルを使ってストーリーを微調整し、 思いどおりの見た目と感触を得られます。

まず、管理アプリから config.json ファイルをダウンロードするか、 一から作成する必要があります次に、ファイルをテキスト エディタで開いて、 値を編集します。テキストや画像だけでなく、カメラも変更できます 没入感のある独自のエクスペリエンスをユーザーに提供できます。

ストーリーの概要の JSON ファイルは次のようになります。

{
  "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
    }
  }

特定のチャプターはこのようになりますChapters は配列で、 多数のチャプターが存在します。

"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
      }
    },

高度なカスタマイズ

コードを詳しく見たり、以下のようなカスタマイズを行ったりできます。

別の場所から構成ファイルを読み込む

ソリューションにはすぐに使える ストーリーテリングの構成が 作成します。ただし、これは config.js で簡単に変更できます。

export async function loadConfig(configUrl) {
  try {
    // Fetch the configuration data from the specified URL.
    const configResponse = await fetch(configUrl);

カメラの構成

カメラは /utils/cesium.js ファイルからさらにカスタマイズできます。 次のようないくつかの重要な変数が定義されています。

  • 半径
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

これらの変数を自由に調整して、さまざまなカメラエンジェルや経験を得ることができます。

まとめ

このドキュメントでは、3D ストーリーテリングをカスタマイズするためのガイドを提供します。 説明します。管理アプリで利用できるさまざまなオプションと 没入感のある魅力的な位置情報ストーリーを創作する方法。水 config.json を使用してカスタム ストーリーを作成するプロセスについても説明しました。 表示されます。次のステップ

3D ストーリーテリング アプリケーションをカスタマイズする方法を学習したところで、 独自のストーリーを作成できます開始にあたっては以下の情報を参考にしてください。

  • 地元の町や訪れた場所についてのストーリーを作成してください。
  • 歴史的な出来事やあなたにインスピレーションを与えた人物についてのストーリーを作成します。
  • 架空の世界や過去に見た夢についてのストーリーを書いてください。

可能性は無限大です。想像力を存分に発揮して 本当に特別なものだからです