このページは Cloud Translation API によって翻訳されました。

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

はじめに

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

ストーリーテリングソリューションは、次の 2 つの便利な方法で柔軟に構成できます。まず、管理アプリで利用できる直感的な UI を使用できます。この UI には専用の設定パネルがあります。このパネルでは、ストーリー全体と個々のチャプターの両方について、imageUrl、タイトル、日付などの主なプロパティを変更できます。

2 つ目は、管理アプリの 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 Autocomplete 検索バーを使用して、表示する場所を検索します。

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

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

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

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

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

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

カメラの設定

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

（カメラをパン、ズーム、チルトして、最適な視界角度を取得します）

管理アプリを使用する

カメラ: カメラの移動速度とオービットの種類を調整して、選択した視聴体験を作成します。

位置情報マーカー: 特定の場所のピンの表示と非表示を切り替えることができます。
半径フォーカスでは、特定の場所を特定することなく、特定の領域の周囲にビネットシャドウを作成します。地域や一般的なエリアを紹介するのに適しています。

ここでは、特定の点ではなく、ある範囲を撮影するためにカメラのフォーカスを変更する方法について説明します。

config.json を使用する

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

cameraOptions: チャプターのカメラ設定。（カメラアングルの詳細をご確認ください）。
- position: position パラメータは、3D 環境内のカメラの空間座標を決定します。3 つの値（x、y、z）で構成されます。各座標は、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 は配列であり、配列内に複数の個別のチャプターを指定できます。

"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 ファイルからさらにカスタマイズできます。次のような重要な変数を定義します。

RADIUS
BASE_PITCH_RADIANS
BASE_HEADING_RADIANS
BASE_ROLL_RADIANS
DEFAULT_HIGHLIGHT_RADIUS

これらの変数を調整して、さまざまなカメラアングルとエクスペリエンスを実現できます。

まとめ

このドキュメントでは、3D ストーリーテリングアプリケーションのカスタマイズに関するガイドを説明します。管理アプリで利用できるさまざまなオプションと、それらを使用して没入感とエンゲージメントの高い位置情報ストーリーを作成する方法について説明しました。また、config.json ファイルを使用してカスタムストーリーを作成するプロセスについても説明しました。次のステップ

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

故郷や訪れた場所に関するストーリーを作成します。
歴史上の出来事や、自分を奮い立たせてくれた人物に関する物語を作成します。
架空の世界や夢に関する物語を作成します。

可能性は無限大です。想像力を駆使して、本当に特別なものを作りましょう。

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

はじめに

ご利用方法:

自分だけの物語を作ろう

カバーページ

管理アプリを使用する

config.json を使用する

章

管理アプリを使用する

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

カメラの設定

管理アプリを使用する

config.json を使用する

構成を保存する

最終的な config.json

高度なカスタマイズ

別の場所から設定ファイルを読み込む

カメラの設定

まとめ

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