3D 模型檢視器元件和3D 編輯器- Google Web Designer說明

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

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

GLB ... 跳至主內容3D模型檢視器元件和3D編輯器 這個元件不適用於GoogleAds、GoogleAdMob、AMPHTML廣告、影片廣告和圖像廣告。

您可以運用「3D模型檢視器」元件在廣告中嵌入GLB格式的3D模型，讓使用者可以旋轉、平移或縮放3D模型。

另外，您也可以使用GoogleWebDesigner中的3D編輯器設定這類模型。

瀏覽器相容性 InternetExplorer和MicrosoftEdge不支援3D模型檢視器元件。

如何在專案中新增3D模型檢視器元件： 依序開啟「元件」面板和「圖像與效果」資料夾。

將「3D模型檢視器」元件拖曳至中心區域。

在「屬性」面板的「3D模型檢視器」部分中，輸入要做為「來源」的GLB檔案。

按一下「瀏覽」按鈕從檔案系統中選取檔案。

按兩下中心區域上的相應元件，即可開啟「3D編輯器」對話方塊並設定模型。

完成後，按一下[儲存]。

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

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

屬性 說明 名稱 3D模型檢視器元件的名稱。

來源 3D素材資源的GLB來源檔案。

素材資源檔案的大小上限為3MB。

請參閱3D素材資源指南瞭解其他規範，並使用KhronosglTFValidator檢查自己的GLB檔案是否有效。

進階屬性 屬性 說明 手勢提示圖示 顯示在3D模型上的圖片，可提示使用者與模型互動。

為吸引使用者目光，手勢提示會略微移動，直到顯示時間達到動畫時間限制為止。

使用者一旦開始與模型互動，手勢提示就會消失。

可繫結至動態資料。

手勢提示文字 顯示在手勢提示圖示下方的文字。

只有在已指定手勢提示圖示的情況下，才能使用這個屬性。

可繫結至動態資料。

設定動畫時間限制 如要設定手勢提示動畫的顯示時長，請勾選此方塊，並設定持續時間(以秒為單位)。

可繫結至動態資料。

3D編輯器 如何開啟3D編輯器對話方塊： 在中心區域的3D模型檢視器元件上按兩下。

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

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

GLB分頁 您在「GLB」分頁中所做的變更都會儲存到素材資源資料夾中的模型來源檔案，就連當做材質使用的圖片檔，也同樣會彙整到GLB檔案中。

您可以配置GoogleWebDesigner的偏好設定，讓系統自動刪除未使用的材質。

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檔案皆不得大於150KB。

如要使用大型HDR檔案，建議您將大小調整為256x128以因應這項限制。

呈現方式 背景 圖片-選取要做為背景的圖片或環境(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編輯器中預覽，或是按一下右上角的[預覽]按鈕，在瀏覽器中預覽。

這對您有幫助嗎？我們應如何改進呢？是否送出true圖像與效果3D模型檢視器元件和3D編輯器圖片效果元件粒子效果元件Sprite工作表元件漩渦元件搜尋清除搜尋內容關閉搜尋Google應用程式主選單搜尋說明中心true5050422falsefalse