3D エリア エクスプローラ: カスタマイズ ガイド

3D エリア エクスプローラは、魅力的な 3D でコミュニティを探索できるようにするソリューションです。このソリューションでは、Google の Photorealistic 3D Tiles、Places Search、Place Details、Autocomplete API を活用しています。

ご利用方法:

有効にする

エクスペリエンスをカスタマイズする

3D エリア エクスプローラ ソリューションは高度にカスタマイズ可能で、カスタマー ジャーニーに合わせてエクスペリエンスをカスタマイズできます。カスタマイズには、UI のコントロール パネルまたは config.json ファイルを使用します。

カスタマイズの準備はできましたか？手順は次のとおりです。

ロケーション

config.json ファイルで緯度と経度を調整して、エクスペリエンスの開始点を定義します。

カメラ制御

カメラの軌道のタイプ（古典的な円形パスや興味をそそる正弦波）を選択して、旅を思いどおりにコントロールしましょう。

  • 固定軌道:

    特定の地点を中心とした一定の高さの円軌道です。

    Google シドニー オフィスで、実際の動きを確認する。

  • 動的軌道:

    カメラは、指定されたスポットの周りを正弦波の軌道に沿って滑らかに移動します。このユニークな動きにより、視聴者はさまざまな高さと角度からスポットを観察することができ、動的で没入感のある視覚的エクスペリエンスを提供できます。

    エッフェル塔を探索して、実際の軌道を探索する。

スポット（POI）:

  • 探索する場所の種類を指定することで、探索をカスタマイズできます。config.json の types 配列を使用して、博物館、公園、学校などから選択します。
  • density パラメータを調整して、スポットの最大数を設定します。
  • searchRadius (in meters) を変更して、近くに隠れた宝石を含めるか、特定の領域に焦点を当てます。
  • speed (in revolutions per minute) パラメータを使用して、カメラの移動速度を選択します。

データ探索のプリロード: URL のカスタマイズで詳細を確認する

3D エリア エクスプローラでは、URL のカスタマイズでデータ探索を事前に定義できます。これにより、手動構成が不要になり、ユーザー エクスペリエンスが合理化されます。

完璧な URL の作成:

エリア エクスプローラの URL に特定のパラメータを追加するだけで、場所やその他の設定が事前設定されます。次に例を示します。

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

この URL は、指定された緯度と経度に出発地を設定し、指定された場所にすぐに移動します。使用可能なパラメータ:

  • location.coordinates.lat: 選択した場所の緯度。
  • location.coordinates.lng: 選択した場所の経度。
  • poi.types: 表示するスポットタイプのカンマ区切りリスト。
  • poi.density: 選択するスポットの最大数。
  • poi.searchRadius: 付近のスポットを検索する半径。
  • camera.speed: カメラの軌道速度。
  • camera.orbitType: カメラの軌道タイプ（「固定軌道」または「ダイナミック軌道」）。

URL のカスタマイズのメリット:

  • 選択した設定をあらかじめ定義して、ユーザー エクスペリエンスを効率化します。
  • あらかじめ読み込まれた特定の場所やスポットで、対象とする経路を共有する。
  • 事前構成済みのエリア エクスプローラのエクスペリエンスをウェブサイトにシームレスに埋め込むことができます。

URL のカスタマイズ機能を活用することで、オーダーメイドのエクスペリエンスを作成し、他のユーザーをキュレートされたアドベンチャーに誘うことができます。

その他のカスタマイズ

前のセクションでは、UI または構成ファイルからアクセスできる調整について説明しました。ただし、アプリケーションをさらにカスタマイズするために変更できる組み込みパラメータもいくつかあります。

こうした高度なカスタマイズを行うには、src ディレクトリにある src/utils/cesium.js ファイルのコードを確認する必要があります。次の変数を変更して、アプリの外観を変更できます。

カメラの高さ

CAMERA_HEIGHT 値を調整することで、ある地点に向かって飛行する際のカメラの高さを制御します。値を大きくすると、パノラマ ビューがズームアウトされ、値が低いほど領域の細部に近づきます。

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
  • 設定: CAMERA_HEIGHT
  • デフォルト値: 100
  • 説明: ある地点にジャンプするときに、ターゲット地点からのカメラの高さを定義します。
  • 値の例:
    • 50: 細部まで確認できるクローズアップ ビュー。
    • 200: よりパノラマ的な視点。

カメラピッチ

カメラの初期傾斜は BASE_PITCH で定義されます。下向きの傾斜には負の値を使用し、上向きのビューには正の値を使用します。データ探索に微妙でダイナミックな動きを加えるには、AUTO_ORBIT_PITCH_AMPLITUDE を変更します。

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;
  • 設定: BASE_PITCH と AUTO_ORBIT_PITCH_AMPLITUDE
  • デフォルト値：
    • BASE_PITCH: -30（下方に 30 度ピッチ）
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10（時間の経過とともにピッチを 10 度変更）

説明: カメラのピッチとは、地図の視覚的な傾斜の度合いで、度数で示されます。これは傾斜とも呼ばれます。これらの設定により、自動回転中のカメラの初期ピッチと動的なピッチ調整が定義されます。

値の例:

  • BASE_PITCH: 0（レベルのカメラ）
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0（ピッチ変動なし）

カメラの範囲とズーム

これらのパラメータは、特定のポイントにフォーカスする際に適用されるズームの程度を設定します。値が小さいほどズームが近くなります。

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

設定: RANGE_AMPLITUDE_RELATIVE と ZOOM_FACTOR

デフォルト値:

  • RANGE_AMPLITUDE_RELATIVE: 0.55（相対的な距離の変動）
  • ZOOM_FACTOR: 20（カメラのズーム倍率）

説明: これらの設定では、カメラの移動中の範囲の変動と、細部を精査するためのズームレベルを定義します。

値の例:

  • RANGE_AMPLITUDE_RELATIVE: 1（変動なし）
  • ZOOM_FACTOR: 10（ズームを縮小）
// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

カメラをリセット

ユーザーがカメラを元の位置にリセットする場合は、CAMERA_OFFSET 値が使用されます。この設定には、方角（回転）、ピッチ（傾斜）、範囲（カメラの中心からの距離）などがあります。

  • 設定: CAMERA_OFFSET
  • デフォルト値：
    • heading: 0（回転オフセットなし）
    • pitch: Cesium.Math.toRadians(-30)（下向きに 30 度ピッチ）
    • range: 800（中心から 800 m）
  • 説明: ビューをリセットするためのカメラ方角、ピッチ、範囲を定義します。
  • 値の例:
    • heading: 45（度、北西のビュー）
    • range: 1,500 メートル（中心から遠い）

開始座標:

START_COORDINATES は、カメラの初期経度、緯度、高さを定義します。ここからデータ探索が開始されるため、ユーザーに最初に見てもらいたいエリアに設定します。

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};
  • 設定: START_COORDINATES

  • デフォルト値:

    • longitude: 0
    • latitude: 60
    • height: 15000000（地上 15,000 km）

  • 値の例:

    • longitude: -122.4934、latitude: 37.7951（ゴールデン ゲート ブリッジ）
    • height: 2,000（近くの開始位置）

事前定義の場所を読み込む

config.json の location オブジェクトでエリアの中心を設定します。Cesium ビューアのカメラの初期視点です。coordinates: カメラを最初にパンする場所の緯度（lat）と経度（lng）を定義します。これらの値を調整して、カメラを地球上の特定の場所に設定します。

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

この設定により、3D Place Navigator アプリケーションを任意の特定の場所にズームインして起動できます。Google のジオコーディング ツールを使用すると、場所オブジェクトで住所や場所の名前を指定することで、その緯度と経度の座標を取得できます。

  1. ジオコーディング ツールにアクセスします。
  2. ジオコーディング リクエストを作成する: [Try It Yourself] セクションをクリックし、[Address] フィールドに選択した場所を入力します。住所、地名、さらにはランドマークも指定できます
  3. 座標を生成 [実行] ボタンをクリックして、リクエストを送信します。ツールは、geometry.location セクションに表示される緯度と経度の座標など、場所に関するさまざまな情報を含むレスポンスを返します。
  4. ジオコードの使用: レスポンスから取得した緯度と経度の値をコピーし、構成内の coordinates オブジェクトに貼り付けます。

注: この方法で使用するジオコードは、Google Maps Platform の利用規約の第 3 条 4 項に記載されている条項に準拠している必要があります。つまり、30 日以上キャッシュ保存することはできず、30 日経過後に更新する必要があります。

イメージ

この設定では、Geocoding ツールを使用して、カリフォルニア州マウンテン ビューにある Google 本社の座標を自動的に特定し、その場所にカメラを合わせた 3D Place Navigator アプリを起動します。

高度なカスタマイズ

コードを深く掘り下げることで、追加のカスタマイズを行うことができます。次のセクションでは、いくつかのオプションについて説明します。

新しいカメラパスを追加する

このソリューションでは、すぐに使用できる 2 種類のカメラパスが実装されています。

fixed-orbit" | "dynamic-orbit"

ただし、必要に応じて新しいカメラパスを作成することもできます。その場合は、

/src/utils/cesium.js（calculateAutoOrbitFrame 関数内）

この新しいパス計算を設定パネルで使用するには、demo/src/camera-settings.js. の実装を参照してください。

場所のタイプを追加

この構成の場所タイプのリストは、demo/src/place-settings.js ファイルで調整できます。4 行目が、このデモで使用できるプレイスタイプです。

デモソースを変更せずに特定の場所タイプを使用する場合は、それらを poi.types の config.json ファイルに追加します。

スタイルをカスタマイズする（CSS）

スタイルについては、CSS 変数を使用しました。すべての主要なブラウザでサポートされており、一元的に 1 行を変更したり、特定の CSS プロパティを更新したりすることができます。CSS 変数は src/main.css. で定義されています。このファイルでは、アプリ全体の色、フォント設定、パディング、マージンを調整できます。

追加データをオーバーレイする

追加のデータをオーバーレイするには、src/utils/cesium.js ファイルを更新し、GeoJSON またはその他の地理参照データを地球に追加する方法について、cesium のドキュメントを参照する必要があります。

構成セクションを削除する

この JavaScript アプリケーションの構成ファイルには、主に demo/src/[config-panel.js](config-panel.js): location、poi、camera という 3 つのセクションがあります。これらの各セクションでは、アプリケーションのさまざまな側面の構成オプションについて説明します。デベロッパーは、各自のニーズに応じてこれらのセクションをカスタマイズできます。

1.設定から特定のセクションを削除する

  • ロケーション セクション

location セクションを削除するには、コード内の次の行を探し、コメントまたは削除します。

const locationConfig = { ...config.location, ...customConfig.location };
  • スポット セクション

poi セクションを削除するには、コード内の次の行を探し、コメントまたは削除します。

const poiConfig = { ...config.poi, ...customConfig.poi };
  • カメラ セクション

camera セクションを削除するには、コード内の次の行を探し、コメントまたは削除します。

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. 組み合わせた構成の更新

セクションを削除した後は、結合された構成オブジェクトを更新する必要があります。このオブジェクトは、デフォルトの構成とカスタマイズを結合します。 combinedConfig オブジェクトから対応するプロパティを削除します。

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. UI 要素を調整する

セクションを削除することで、関連する UI 要素も削除する場合は、HTML コードに従ってコードを更新してください。たとえば、カメラ速度などの特定のセクションを管理パネルから削除する場合は、その部分の js コードと html コードの両方を更新する必要があります。

4. カメラ設定セクションを削除

UI からカメラ設定セクションを削除するには、次の行を見つけてコメントまたは削除します。

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

地域セクションの概要の削除

const locationSection = await getLocationSettingsSection(locationConfig);

おわりに

このドキュメントでは、3D 探索のエクスペリエンスをカスタマイズするためにエリア エクスプローラで利用できるさまざまなカスタマイズ オプションを見てきました。カメラの動作の変更、視覚的な傾斜の調整、ズームレベルの変更により、選択した設定やスポットを紹介する、ユニークで魅力的なエクスペリエンスを作り出すことができます。

さまざまな構成を試して、特定のニーズに合わせてパラメータを微調整してください。カスタマイズ機能を活用することで、オーディエンスを魅了し、ビジョンを現実のものにする、没入型のパーソナライズされたジャーニーを作成できます。