FVS自訂模型線框風格

適用場景：安裝了「FVS大屏編輯模式」插件的使用者，可參考本文了解 FVS 範本的相關功能。

注：不支援行動端。

1.1 版本

1.2 應用場景

在三維場景中，線框風格是最有科技感的一種視覺效果，常用於以下兩種場景：

• 透視模型內部情況，例如機器內部運作情況

• 提高整體場景的科技氛圍

例如機器產線模型開啓線框風格的效果如下圖所示：

1.3 功能簡介

1）在 三維城市組件 和 自訂模型組件 中上傳自訂 glb 模型時，支援進行「風格預處理」，可啟用線框風格。

2）線框風格分為「預設線框」和「自訂線框」，只能選擇一種使用。

3）「自訂線框」需上傳與模型外表相匹配的線框貼圖，線框貼圖的製作方式可參考：三維模型如何製作線框貼圖 。

4）模型屬性中新增「風格」設定項，支援修改風格的相關設定。

5）模型屬性中新增「動畫」設定項，啟用了線框風格的模型支援新增「線框變化動畫片段」，新增後即可作為三維組件的動畫使用。

本文主要介紹自訂模型線框風格的相關操作及效果，關於自訂模型的更多內容請參考文檔：FVS自訂模型組件 。

請點選下載本文使用的模型及貼圖資源：模型及貼圖資源.zip

2.1 新增組件並建立場景

點選設計器左上角「檔案>建立大屏範本」，建立範本後，向畫布中新增一個自訂模型組件，點選右側內容配置面板「編輯組件」。

首次進入組件編輯介面時需建立場景，此處直接點選「生成場景」即可，生成場景後預設進入「模型」配置面板。

如下圖所示：

2.2 風格預處理

1）點選「新增模型」進入模型庫，再點選「上傳新模型」，選擇下載的範例檔案中的 production_line.glb 檔案。

2）上傳模型時，需對模型進行預處理：

資料預處理：可調整模型的顯示層級。該操作僅支援預處理時設定，後續無法再次編輯或者廢除。

風格預處理：可選擇是否勾選「啟用線框風格」。勾選後，可選擇使用「預設線框」或「自訂線框」。

左側預覽介面會顯示線框風格，可透過滑鼠左右鍵及滾輪調整視角。

• 預設線框：支援「臨界值」調整設定。臨界值越大，線框風格包括的細節越多。

注1：預設臨界值為 10 可能會導致有些模型看不出效果，此時將臨界值調大即可。

注2：若上傳的模型面數過多，啟用預設線框時，載入可能非常慢。建議先簡化模型面數後再進行風格預處理。

• 自訂線框：支援上傳與模型外表相匹配的線框貼圖，貼圖必須是用建模軟體處理匯出的 png 圖片，如何製作可參考：三維模型如何製作線框貼圖 。

注：若需客製模型及線框貼圖可聯絡帆軟銷售顧問。

模型預處理完成後即被新增到模型庫中，滑鼠懸浮模型檔案時，右上角出現「編輯」和「刪除」按鈕。

點選「編輯」按鈕，彈出預處理設定框，此時僅支援修改「風格預處理」相關設定。

如下圖所示：

2.3 模型風格

選中模型列表中的模型物件時，在下方屬性面板中可設定模型「風格」，支援設定為「預設」或「線框風格」。

1）模型初始時，風格均顯示為「預設」，展示為模型原始風格。如下圖所示：

2）若模型風格預處理時，啟用了線框風格，則根據線框風格型別顯示為不同的選項：

• 線框風格(預設)：表示預設風格為「預設線框」，支援設定線框粗細和線框顏色。

• 線框風格(自訂)：表示預設風格為「自訂線框」，僅支援設定線框顏色。

3）若模型風格預處理時，未啟用線框風格，此時選擇「線框風格」，會提示 操作失敗，請先處理線框風格。

點選「立即處理」，在彈出的風格預處理設定框中設定後，點選「確定」，即可成功切換風格。

如下圖所示：

4）點選右側「風格預處理」設定按鈕，也會彈出設定框，支援修改預設的線框風格。

2.4 線框變化動畫

2.4.1 新增動畫片段

選中模型列表中的模型物件時，在下方屬性面板中可設定模型風格切換「動畫」，支援新增多個動畫片段。

要新增線框變化動畫需啟用線框風格，若未啟用線框風格，點選「 線框變化動畫片段」，會提示 操作失敗，請先處理線框風格 。

點選「立即處理」，啟用線框風格後，再重新新增動畫片段即可。

動畫片段設定項如下表所示：

將所有設定項設定完成後，方可點選「確定」。如下圖所示：

2.4.2 設定動畫效果

新增線框變化動畫片段後，即可在「模型動畫管理」中開啓模型動畫並新增動畫方案。

線框動畫支援設定播放方式為立即播放或延遲播放，以及是否開啓循環播放。設定完成點選「確定」，在左側模型展示介面即可立即看到動畫效果。

注：若不開啓循環播放，則模型會停留在動畫結束時的風格樣式。

如下圖所示：

2.5 其他組件點選觸發動畫

新增線框變化動畫後，可透過其他組件新增「交互點選事件」觸發三維組件動畫。

例如本例按照 2.4.1 節新增了兩個動畫片段，分別是「從原始到線框」和「從線框到原始」。

點選模型編輯介面左上角「返回大屏編輯器」，在畫布中新增兩個 標題組件 ，標題內容分別為「原始風格」和「線框風格」。

如下圖所示：

選中「原始風格」標題，點選「交互>新增點選事件>三維組件動畫」。

事件名稱為「風格切換」，選擇當前頁的模型，觸發動畫選擇「從線框到原始」，觸發時機選擇「點選立即觸發動畫」。

則點選「原始風格」，模型觸發從線框到原始的變化動畫，最後停留在原始風格。

操作步驟如下圖所示：

同理，「線框風格」標題新增點選事件，動畫選擇「從原始到線框」即可。

最後預覽效果如下圖所示：

點選下載範本：自定义模型线框风格示例.fvs