このコンポーネントは、Google 広告、Google AdMob、AMP HTML 広告、動画広告、イメージ広告ではサポートされていません。
3D モデルビューア コンポーネントを使用すると、GLB 形式の 3D モデルを広告に埋め込んで、回転、パン、ズームを行うことができます。Google Web Designer の 3D エディタ内でモデルを構成することもできます。
3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer
ブラウザの互換性
Microsoft Edge は、3D モデルビューア コンポーネントをサポートしていません。
プロジェクトに 3D モデルビューア コンポーネントを追加するには:
- [コンポーネント] パネルを開き、その中の [グラフィックと効果] フォルダを開きます。
- [3D モデルビューア] コンポーネントをステージにドラッグします。
- [プロパティ] パネルの [3D モデルビューア] セクションを開き、[ソース] として使用する GLB ファイルを入力します。参照ボタン
をクリックして、ファイル システムからファイルを選択します。
- ステージ上のコンポーネントをダブルクリックして 3D エディタ ダイアログを開き、モデルを設定します。設定が完了したら、[保存] をクリックします。
Google Web Designer の設定（[編集] > [設定...] > [コンポーネント]）を調整して、GLB ファイルをステージにドラッグしたときに 3D モデルビューア コンポーネントが自動的に作成されるようにすることができます。
プロパティ
このコンポーネントのプロパティは [プロパティ] パネルで確認できます（3D エディタを終了する必要があります）。
| プロパティ | 説明 |
|---|---|
|
名前 |
3D モデルビューア コンポーネントの名前。 |
| ソース |
3D アセットの GLB ソースファイル。アセット ファイルのサイズは 3 MB 以下にする必要があります。 詳細なガイドラインについては、3D アセットガイドをご覧ください。また、GLB ファイルが有効であることを確認するには、Khronos glTF Validator を使用してください。 |
詳細プロパティ
| プロパティ | 説明 |
|---|---|
|
ジェスチャー キューのアイコン |
3D モデル上にジェスチャー キューのアイコンを表示して、ユーザーにモデルの操作を促すことができます。ジェスチャー キューは、アニメーションの時間制限まで小さく動いてユーザーの注意を引き、ユーザーがモデルを操作し始めると消えます。動的データにバインドできます。 |
|
ジェスチャー キューのテキスト |
ジェスチャー キューのアイコンの下に表示するテキスト。ジェスチャー キューのアイコンが指定されている場合にのみ、適用されます。動的データにバインドできます。 |
|
アニメーションの時間制限を設定 |
このチェックボックスをオンにすると、ジェスチャー キューのアニメーションの時間制限を秒単位で設定できます。動的データにバインドできます。 |
3D エディタ
3D エディタ ダイアログを開くには:
- ステージ上の 3D モデルビューア コンポーネントをダブルクリックします。
回転やズームが可能な 3D モデルのプレビューが表示されます。また、ホットスポットを操作することもできます。
モデルを設定するには、右側のパネルを使用します。設定項目は、[GLB] と [コンポーネント] の 2 つのメインタブに分かれています。
GLB タブ
[GLB] タブで行った変更は、アセット フォルダ内のモデルのソースファイルに保存されます。これには、テクスチャとして使用される画像ファイル（GLB ファイルにバンドルされます）が含まれています。Google Web Designer の設定により、未使用のテクスチャを自動的に削除できます。
|
|
|---|---|
|
ソース |
3D モデルの GLB ソースファイル。 このフィールドは読み取り専用です。ソースファイルを変更するには、3D エディタ ダイアログを終了し、[プロパティ] パネルでコンポーネントの [ソース] プロパティを編集します。 |
|
詳細 |
サイズ - ソースファイルのサイズ。 |
|
|
|
マテリアル |
一度に 1 つのマテリアルを設定できます。
|
|
ベースカラー |
現在のマテリアルに使用する開始時の色とテクスチャ。 |
|
メタリック / ラフ |
メタリックとラフのプロパティによって、マテリアルが光をどのように反射するかが決まります。
|
|
標準の地図 |
テクスチャを選択して、マテリアルに凹凸や表面のディテールを追加します。 |
|
発光色 |
マテリアルからの発光を表現する色とテクスチャを選択します。 |
|
オクルージョン |
環境光による影を表現するテクスチャを選択します。 |
| その他 |
マテリアルのその他のオプションを設定します。
|
コンポーネント タブ
[コンポーネント] タブで行った変更は、3D モデルビューア コンポーネント内に反映され、基となる GLB ソースファイルには保存されません。
HDR ファイル
3D モデルビューア コンポーネントでは、背景光と環境光に HDR（ハイ ダイナミック レンジ）画像ファイルを使用できます。各 HDR ファイルは 150 KB 未満にする必要があります。この上限に収まるように、大きな HDR ファイルは 256x128 にサイズ変更することをおすすめします。
|
|
|---|---|
|
背景 |
画像 - 背景として使用する画像または環境（HDR ファイル）を選択します。動的データにバインドできます。 |
|
環境光（HDR） |
画像ベースの光を使用して、現実の環境に基づくきめ細かい環境光を提供できます。
|
|
アニメーション |
GLB ソースファイルにアニメーションが含まれている場合は、アニメーションを自動再生に設定できます。現在のところ、3D エディタはアニメーションの作成をサポートしていません。
|
|
|
|
最初のカメラビュー |
コンポーネントが読み込まれた際のカメラ設定を指定します。カメラの回転の制限とズームの制限について以下の設定が適用されます。
|
|
軌道の軸 |
軌道の軸とは、カメラの回転の中心となる 3D 空間内の点です。デフォルトでは、3D モデルの中心に設定されています。
|
|
視野 |
カメラの垂直視野。
|
| カメラの回転の制限 |
ユーザー操作によるモデルの回転範囲を制限する場合は、[ヨー] または [傾斜] のチェックボックスをオンにして、角度の最小値と最大値を設定します。
|
|
カメラのズームの制限 |
|
|
|
|
ホットスポット |
ホットスポットとは、ユーザーによる操作が可能な 3D モデル上の点のことです。ホットスポットがクリックされたときに、情報カードの表示、またはイベントの起動を行えます。
|
|
画像 |
さまざまな状態用の画像を指定して、ホットスポットの外観をカスタマイズできます。すべてのホットスポットが同じ画像のセットを使用します。
|
|
情報カードのスタイル |
情報カードの外観は、色を設定することでカスタマイズできます。
|
イベントとアクション
イベントイベントを使用して広告内の他のアクションをトリガーできます。3D モデルビューア コンポーネントは、以下のイベントを送信します。
| イベント | 説明 |
|---|---|
| 3D シーンのレンダリング完了 | 3D モデルシーンが初めてレンダリングされると、送信されます。 |
| カメラの変更 | 3D カメラのプロパティが変更されると送信されます。ユーザーがカメラを調整した場合は、event.detail オブジェクトにプロパティ source: user-interaction が含まれます。 |
| ホットスポットのクリック | 3D エディタで設定したホットスポットがクリックされると送信されます。event.detail オブジェクトには、クリックされたホットスポット名、シーンのホットスポット リスト内のホットスポット インデックス、ホットスポットの X と Y の画面座標が含まれます。 |
| 操作の開始 | ユーザーが 3D モデルの操作を開始すると送信されます。 |
| 操作の終了 | ユーザーが 3D モデルの操作を停止すると送信されます。 |
イベント ダイアログでこれらのイベントのいずれかを選択するには、3D モデルビューア コンポーネントをターゲットとして設定します。
以下の 3D モデルビューア コンポーネントのアクションは、他のイベントによってトリガーされます。
| イベント | 説明 | 設定項目 |
|---|---|---|
| ヨーを設定 | モデルを指定したヨー（垂直軸を中心とした回転）に変更して、静止アニメーションを一時停止します。 |
|
| ターゲットのヨーを設定 | モデルをスムーズに回転させて、指定のヨーにします。 |
|
| ターゲットのピッチを設定 | モデルをスムーズに回転させて、指定のピッチ（前後方向の軸を中心とした回転）にします。 |
|
| ターゲットのピッチを増加 | モデルをターゲットのピッチに向けて、指定の量だけスムーズに回転させます。モデルがすでにターゲットのピッチに達している場合は実行されません。 |
|
| ターゲットのズームを設定 | 指定したズームレベルに、スムーズにズームします。 |
|
| ターゲットのズームを増加 | ターゲットのズームをメートル単位で増加させます。 |
|
| ターゲットの回転軸を設定 | 回転させるポイントを変更し、その点を中心として回転するように、カメラをスムーズに動かします。 |
|
| ターゲットのローカルパンを設定 | カメラを新しい位置にスムーズに移動します。 |
|
| マテリアルの色を設定 | マテリアルの色を設定します。 |
|
| アニメーションを再生 | 指定されたアニメーションを再生します。 |
|
| アニメーションを一時停止 | 指定されたアニメーションを一時停止します。 |
|
| アニメーション時間を設定 | アニメーション中の指定された時間に移動します。 |
|
イベント ダイアログで上記のアクションのいずれかを選択する場合は、3D モデルビューア コンポーネントをレシーバーとして設定します。
カスタムコードを使って追加のメソッドを利用できます。
getCameraDetails()
現在のカメラ設定情報を含むオブジェクトを返します。
返されるオブジェクトのプロパティ:
- yaw - 垂直軸を中心とした回転角度（度）。
- pitch - 水平軸を中心とした回転角度（度）。
- zoom - ズームレベル（メートル）。
- x - カメラの軌道の軸の X 座標（メートル）。
- y - カメラの軌道の軸の Y 座標（メートル）。
- z - カメラの軌道の軸の Z 座標（メートル）。
上級ユーザーの場合は、https://modelviewer.dev にあるドキュメントも参考にしてください。
プレビュー
3D モデルビューア コンポーネントは、3D エディタまたはブラウザ（ウィンドウ右上の [プレビュー] ボタンをクリック）でのみプレビューできます。