3D 模型檢視器元件和 3D 編輯器

這個元件不適用於 Google Ads、Google AdMob、AMP HTML 廣告、影片廣告和圖像廣告。

您可以運用「3D 模型檢視器」元件在廣告中嵌入 GLB 格式的 3D 模型，讓使用者可以旋轉、平移或縮放 3D 模型。另外，您也可以使用 Google Web Designer 中的 3D 編輯器設定這類模型。

3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer

瀏覽器相容性

Microsoft Edge 不支援 3D 模型檢視器元件。

如何在專案中新增 3D 模型檢視器元件：

1. 依序開啟「元件」面板和「圖像與效果」資料夾。
2. 將「3D 模型檢視器」元件拖曳至中心區域。
3. 在「屬性」面板的「3D 模型檢視器」部分中，輸入要做為「來源」的 GLB 檔案。按一下「瀏覽」按鈕 從檔案系統中選取檔案。
4. 按兩下中心區域上的相應元件，即可開啟「3D 編輯器」對話方塊並設定模型。完成後，按一下 [儲存]。

您可以調整 Google Web Designer 的偏好設定 (依序點選 [編輯] > [偏好設定...] > [元件])，讓系統在 GLB 檔案拖曳至中心區域時，自動建立 3D 模型檢視器元件。

屬性

您可以在「屬性」面板中查看元件屬性 (必須關閉 3D 編輯器)。

屬性	說明
名稱	3D 模型檢視器元件的名稱。
來源	3D 素材資源的 GLB 來源檔案。素材資源檔案的大小上限為 3 MB。 請參閱 3D 素材資源指南瞭解其他規範，並使用 Khronos glTF Validator 檢查自己的 GLB 檔案是否有效。

進階屬性

屬性	說明
手勢提示圖示	顯示在 3D 模型上的圖片，可提示使用者與模型互動。為吸引使用者目光，手勢提示會略微移動，直到顯示時間達到動畫時間限制為止。使用者一旦開始與模型互動，手勢提示就會消失。可繫結至動態資料。
手勢提示文字	顯示在手勢提示圖示下方的文字。只有在已指定手勢提示圖示的情況下，才能使用這個屬性。可繫結至動態資料。
設定動畫時間限制	如要設定手勢提示動畫的顯示時長，請勾選此方塊，並設定持續時間 (以秒為單位)。可繫結至動態資料。

3D 編輯器

如何開啟 3D 編輯器對話方塊：

• 在中心區域的 3D 模型檢視器元件上按兩下。

您會看到 3D 模型的預覽畫面，可以在這裡嘗試旋轉及縮放 3D 模型，或是與任何互動區進行互動。

您可以利用右邊的面板設定模型，相關設定就位於 GLB 和元件兩個主要分頁。

GLB 分頁

您在「GLB」分頁中所做的變更都會儲存到素材資源資料夾中的模型來源檔案，就連當做材質使用的圖片檔，也同樣會彙整到 GLB 檔案中。您可以配置 Google Web Designer 的偏好設定，讓系統自動刪除未使用的材質。

GLB 檔案資訊
來源	3D 模型的 GLB 來源檔案。 這是唯讀欄位。如要變更來源檔案，請關閉「3D 編輯器」對話方塊，然後在「屬性」面板中編輯元件的 [來源] 屬性。
詳細資料	大小 - 來源檔案的大小。
素材
素材	一次只能設定一個素材。 已選取 - 這個下拉式選單中會列出 3D 模型用到的所有素材。請選取您要查看或編輯的素材。
底色	目前素材的起始顏色和材質。
金屬/粗糙度	金屬與粗糙度屬性決定的是素材對於光照的反射表現。 材質 - 選取代表素材金屬程度的材質。 金屬 - 介於 0 和 1 之間的值，代表素材的金屬程度。素材的金屬程度越高，反射環境光的效果越好。 粗糙度 - 介於 0 和 1 之間的值，代表素材的霧面程度。這個值會影響反射的銳利度，0 表示能完全反光，1 則為全霧面。
法線貼圖	選取為素材增添凹凸紋理和表面細節的材質。
發光	選取表現素材光暈的顏色和材質。
遮蔽	選取表現環境光陰影的材質。
其他	其他素材設定選項： 雙面 - 勾選這個核取方塊，即可將素材設為雙面。 Alpha 交融 - 選取如何設定材質的 Alpha 值 (透明度)： 不透明 - 忽略 Alpha 值，材質一律為不透明。 交融 - Alpha 值介於 0 到 1 之間，材質為半透明。 遮罩 - 材質的每個部分只可能是完全透明或完全不透明，具體如何取決於材質的 Alpha 值和所指定 「Alpha 截止值」的對比情況。如果 Alpha 值高於截止值，系統就會處理成不透明。

元件分頁

您在「元件」分頁中所做的變更都會反映在 3D 模型檢視器元件上，但不會反映在基準的 GLB 來源檔案中。

HDR 檔案

HDR (高動態範圍) 圖片檔可用於 3D 模型檢視器元件中的背景和環境照明。每個 HDR 檔案皆不得大於 150 KB。如要使用大型 HDR 檔案，建議您將大小調整為 256 x 128 以因應這項限制。

呈現方式
背景	圖片 - 選取要做為背景的圖片或環境 (HDR 檔案)。可繫結至動態資料。
環境照明 (HDR)	您可以運用圖片式照明來呈現出現實環境的光照細節。 圖片 - 選取要使用的 HDR 格式全景圖片。可繫結至動態資料。 曝光 - 曝光程度。 陰影濃度 - 陰影的不透明度。 陰影柔和度 - 陰影的模糊程度。
動畫	如果 GLB 來源檔案包含動畫，您可以將動畫設為自動播放。3D 編輯器尚未支援製作動畫。 預設 - 選取預設播放的動畫。 自動播放：如要在元件載入後開始播放預設動畫，請勾選這個核取方塊。 設定動畫時間限制 - 如要自動暫停播放動畫，請勾選這個核取方塊，然後輸入預定的動畫播放秒數。
相機
初始相機畫面	初始相機畫面決定的是元件載入時的相機設定。如果設定下列幾種鏡頭旋轉與縮放限制，這些限制將強制生效。 偏轉 - 鏡頭沿垂直軸的旋轉角度。 俯仰 - 鏡頭沿水平軸的旋轉角度。 縮放 - 鏡頭與模型的距離。 使用目前畫面做為初始畫面 - 如果您已經調整過「3D 編輯器」對話方塊預覽畫面中的相機畫面，而且想將目前的相機畫面設為初始畫面，請點選這個按鈕。
繞著支點旋轉	旋轉支點是鏡頭在 3D 空間中環繞旋轉的點，預設是 3D 模型的中心。 X - 旋轉支點的 X 軸座標。 Y - 旋轉支點的 Y 軸座標。 Z - 旋轉支點的 Z 軸座標。 重設 - 還原為預設的旋轉支點座標。
視野	相機的垂直視野。 角度 - 介於 1° 到 179° 之間的角度。
相機旋轉限制	如要限制使用者旋轉模型的範圍，請勾選 [偏轉] 或 [俯仰] 核取方塊，並設定最小和最大角度。 偏轉 (左右) - 鏡頭可沿垂直軸旋轉的範圍。 俯仰 (上下) - 鏡頭可沿水平軸旋轉的範圍。
相機縮放限制	類型 - 選擇是否限制縮放大小： 不限制相機距離 - 無限制。這是預設選項。 限制相機距離 - 設定距離範圍的上下限。「最小值」縮放等級必須小於「最大值」縮放等級。 固定相機距離 - 使用者無法變更縮放等級。「最小值」縮放等級和「最大值」縮放等級必須是相同的值。
互動區
互動區	互動區是指 3D 模型中可以讓使用者互動的點。您可以設定只要點選互動區就會顯示資訊卡或觸發事件。 新增互動區 - 建立新互動區。做法是先點選這個按鈕，然後按一下您要在 3D 模型上設置互動區的位置。您可以運用下列欄位自訂互動區。 名稱 - 互動區名稱。如要刪除某個互動區，請按一下其名稱旁邊的「刪除」圖示 。 資訊卡 - 點擊互動區是否會叫出資訊卡： 無 - 不叫出資訊卡。 資訊卡 - 叫出資訊卡。 標題 - 資訊卡上的標題。可繫結至動態資料。 說明 - 資訊卡上的文字。可繫結至動態資料。
圖片	您可以指定呈現互動區不同狀態的圖片。所有互動區會共用同一組圖片。 上方 - 使用者未使用互動區時顯示的預設圖片。 下方 - 使用者點選互動區時顯示的圖片。 覆蓋 - 使用者的游標移至互動區時顯示的圖片。 大小 - 互動區的寬度和高度。
資訊卡樣式	自訂資訊卡外觀，設定各部分的顏色。 字型顏色 - 資訊卡標題和文字的顏色。 背景色彩 - 資訊卡背景的顏色。 框線色彩 - 資訊卡框線的顏色。

事件和動作

事件

事件可在您的廣告中觸發其他動作。3D 模型檢視器元件會傳送下列事件：

事件	說明
已轉譯 3D 場景	在首次轉譯 3D 模型場景後傳送。
已變更相機	在任何 3D 相機屬性變更時傳送。如果使用者調整相機，event.detail 物件就會包含 source: user-interaction 屬性。
已點選互動區	在點選 (3D 編輯器中設定的) 互動區時傳送。event.detail 物件包含點選的互動區名稱、場景互動區清單中的互動區索引，以及互動區的 X 和 Y 軸螢幕座標。
已開始互動	在使用者開始與 3D 模型互動時傳送。
已結束互動	在使用者停止與 3D 模型互動時傳送。

如要在「事件」對話方塊中選取以上任一事件，請將 3D 模型檢視器元件設為目標。

動作

以下 3D 模型檢視器元件動作可透過其他事件觸發：

事件	說明	設定選項
設定偏轉角度	將模型更改為指定的偏轉角度 (繞垂直軸旋轉)，並暫停播放預設動畫。	偏轉角度：以度為單位的偏轉角度。
設定目標偏轉角度	將模型平穩地旋轉至指定的偏轉角度。	目標偏轉角度：以度為單位的偏轉角度，介於 -360 到 360 度之間。
設定目標俯仰角度	將模型平穩地旋轉至指定的俯仰角度 (繞縱軸旋轉)。	目標俯仰角度：以度為單位的俯仰角度。
目標俯仰角度遞增	根據指定的數值，將模型朝目標俯仰角度平穩地旋轉。如果模型已旋轉至目標俯仰角度，就不會產生任何效果。	俯仰角度差異值：目前的俯仰角度要加上的度數。
設定目標縮放等級	平穩地縮放到指定的縮放等級。	目標縮放等級：以公尺為單位的縮放等級。
目標縮放等級遞增	以公尺為單位遞增目標縮放等級。	縮放差異值：如要放大，請使用負值。
設定目標支點	變更旋轉中心點，並將相機平穩地移至可圍繞該點旋轉的位置。	目標支點 X ：以公尺為單位的 X 軸位置。 目標支點 Y：以公尺為單位的 Y 軸位置。 目標支點 Z ：以公尺為單位的 Z 軸位置。
設定目標區域平移距離	將相機平穩地移至新位置。	目標區域平移距離 X：以公尺為單位。 目標區域平移距離 Y：以公尺為單位。
設定素材顏色	設定素材的顏色。	素材名稱 紅色：新顏色的紅色值，介於 0 和 1 之間。 綠色：新顏色的綠色值，介於 0 和 1 之間。 藍色：新顏色的藍色值，介於 0 和 1 之間。
播放動畫	播放指定的動畫。	動畫名稱
暫停播放動畫	暫停播放指定的動畫。	動畫名稱
設定動畫時間	跳轉到動畫中的指定時間。	動畫名稱 動畫時間：要跳轉到的指定時間 (以秒為單位)。

在「事件」對話方塊中選取以上任一動作時，請將 3D 模型檢視器元件設為接收端。

API 進階方法

使用自訂程式碼是另一種方法。

getCameraDetails()

傳回包含目前相機設定詳情的物件。

傳回物件的屬性：

• yaw - 沿垂直軸旋轉的角度。
• pitch - 沿水平軸旋轉的角度。
• zoom - 縮放等級，單位為公尺。
• x - 相機旋轉支點的 X 軸座標，以公尺為單位。
• y - 相機旋轉支點的 Y 軸座標，以公尺為單位。
• z - 相機旋轉支點的 Z 軸座標，以公尺為單位。

建議進階使用者另外參閱 https://modelviewer.dev 的說明文件。

預覽

您只能透過兩種方式預覽 3D 模型檢視器元件，分別是在 3D 編輯器中預覽，或是按一下右上角的 [預覽] 按鈕，在瀏覽器中預覽。