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

はじめに

このガイドでは、3D ストーリーテリング ソリューションをカスタマイズして、魅力的な位置情報ストーリーを作成できるようにするさまざまな方法について説明します。

2 つの便利な方法でストーリーテリング ソリューションを構成できる柔軟性がある。まず、管理アプリにある専用の構成パネルを備えた直感的な UI を使用できます。このパネルでは、ストーリー全体と個々の章の両方で、imageUrl、title、date などの主要なプロパティを変更できます。

次に、Admin アプリの GUI を使用して、各章のカメラ設定とフォーカス オプションを微調整します。構成が完了したら、生成された JSON ファイルをダウンロードできます。

または、JSON ファイルを直接編集することもできます。JSON 構造の調整、構成済みのストーリーテリング ソリューションの読み込み、管理コントロール パネルをバイパスできます。この二重のアプローチは、ユーザー フレンドリーなインターフェースと高度な JSON 操作の両方を提供します。

ご利用方法:

有効にする

独自のストーリーを作成

ストーリー全体は、カバーストーリーとチャプターに分かれています。表紙とチャプターはどちらも個別にカスタマイズできます。管理アプリと構成ファイルの両方を使用してストーリーを作成およびカスタマイズする方法については、
こちらをご確認ください。

カバーページ

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

管理アプリを使用

まず、ストーリーのカバーページを追加します。これを行うには、管理アプリの次の画面を使用します。

イメージ

config.json を使用する

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

  • 1. imageUrl: ストーリー全体のメインのメディア ファイル（画像、GIF、動画）の URL。

ストーリー全体のメインメディアとして使用する画像、GIF、動画ファイルを指す任意の公開 URL を指定できます。

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

章

このストーリーは複数の章に分かれており、各章には独自の変数セットがあります。チャプターはいくつでも作成できます。まず住所を選択し、次に以下の詳細情報をその章に追加します。

管理アプリを使用

場所の検索: 統合された Google Maps Platform のオートコンプリート検索バーを使用して、表示する場所を検索できます。

場所を追加したら、その場所の横にある [編集] ボタンをクリックして、チャプターに詳細を追加できます。

イメージ

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

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

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

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

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

カメラの設定

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

イメージ

（カメラのパン、ズーム、チルトを行って最適な角度に調整できます）

管理アプリを使用する

カメラ: カメラの移動速度と軌道タイプを調整して、選択した表示エクスペリエンスを作成します。

  • 位置マーカーを使用すると、特定の場所でのピンの表示 / 非表示を切り替えることができます。

  • 半径フォーカスを使用すると、特定の場所を指定することなく、特定の領域の周囲に周辺減光のシャドウを作成します。周辺地域やおおよその現在地を紹介するのに最適です。

イメージ

特定のポイントではなくエリアを表示するようにカメラのフォーカスを変更する方法を示します。

config.json を使用する

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

  • cameraOptions: この章のカメラ設定。（詳しくは、カメラアングルをご覧ください）。

    • position: 位置パラメータにより、3D 環境内のカメラの空間座標が決まります。x、y、z の 3 つの値で構成されます。各座標は x 軸、y 軸、z 軸上の点を表し、カメラの位置を定義します。

    • heading: 方角パラメータは、カメラが向いている水平方向を指します。地理的には、カメラの画角と北方向が成す角度を表します。方角 0 は、カメラが真北を向いていることを示します。

    • pitch: ピッチ パラメータは、カメラの垂直角度を決定します。カメラのビューの傾きを表します。ポジティブなピッチは下向きであり、ネガティブなピッチは上向きです。

    • 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": [
    {
      "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 ストーリーテリング アプリケーションをカスタマイズする方法を学習したところで、独自のストーリーの作成を開始できます。開始にあたっては以下の情報を参考にしてください。

  • 出身地や訪れた場所に関するストーリーを作成します。
  • 歴史的な出来事や、自分にインスピレーションを与えた人物についてのストーリーを作成してください。
  • 架空の世界や自分が見た夢についてのストーリーを作成してください。

可能性は無限大です。想像力を存分に発揮して 特別なものを作りましょう