酷炫的3D大屏被越來越多的企業用戶需要，但開發一套3D大屏對大部分IT用戶而言都是陌生的。如果沒有定制化開發的外部實施團隊，企業IT部門該如何開發一套3D大屏呢？

帆軟大屏團隊基于已有的FVS項目開發經驗，整理了這套3D大屏設計開發方法論，并舉例一個“3D汽車介紹”場景的實戰demo，幫助大家理順3D大屏的項目流程！

在3D大屏設計開工之前，我們需要調研大屏應用場景、最終用戶的業務訴求、建模範圍、3D風格偏好等，這些決定了一個3D大屏的基調。

1）應用場景：3D大屏的業務訴求一般分展示類和實時監控類，還需了解不同場景所用的大屏硬件及分辨率。

2）業務訴求：了解大屏的需求方希望通過3D大屏達到什麼樣的業務目的。

3）建模範圍：針對現實世界的什麼物體建模，需提供建模對象清單及必要的照片、視頻和圖紙。

4）3D風格：3D建模風格一般分為“科幻”和“寫實”兩大類，科幻類又可分為“貼圖”和“線框”風格，最好讓客戶根據示例demo選擇目标風格。

下面以“新概念汽車介紹”這個3D demo為例向大家介紹（該場景根據真實客戶案例改編而成，場景内數據純屬虛拟）。

該3D大屏的業務需求方是一個大型汽車制造企業的市場營銷部門，需要在大型展會上通過3D可視化大屏向參展者展示某款最新研制的汽車，從而向下遊分銷商、最終客戶、政企領導等展示公司的設計、研發和生産能力，并起到一定的科普作用，助力該款新車型上市後的銷售業績。

應用場所是大型展廳，有多塊LED小屏幕拼接成長寬比為16:9的大屏幕。

寫實風格車身 科幻風格背景

業務方希望3D模型以寫實風格為主，适當輔以科幻元素，即盡量還原汽車本身的形狀、材質、色澤，但結合一些科幻效果的變化，3D環境背景則希望以科幻風格呈現。

3D故事線是指，該大屏如何依次呈現各個3D場景，組合成一個大屏故事。

故事線首先由業務方梳理提出，以3D汽車demo為例，業務方要求重點呈現汽車的動力系統、車身外觀和内飾三個部分：

1）動力系統：既需要汽車奔馳在公路上的動态效果，也需要細看動力系統的硬件構成的效果

2）車身外觀：既有360°自動旋轉的展示方式，又有靜态查看細節的方式

3）汽車内飾：主要關注中控台、主駕和後座三部分，用戶可以自己切換想看的部分

先由3D大屏項目經理與業務方一起梳理出以下故事場景：

緊接着，項目經理需要把業務方的故事場景“翻譯”成demo制作的故事線，即通過什麼交互事件觸發3D模型、2D圖表組件等可視化元素發生什麼變化，呈現出什麼樣的效果。

傳統的大屏項目的一般用框線示意圖繪制簡單的藍圖，但基于FVS，用戶可以直接使用設計器拖拉圖表繪制藍圖，不需要頻繁調整、預覽，甚至不需要太多虛拟數據，FVS自帶的圖表樣式就能滿足原型demo的繪制。

再結合點選式的交互事件配置，一個可交互、可演示的大屏demo就做好了。項目經理拿着這個藍圖，可以給業務方再演繹一遍故事線，确認原型無誤後再投入視覺設計。

一個完整的3D大屏設計團隊一般有3個設計師角色：

1）主設計師：負責與項目經理溝通，确定和把控整體的視覺風格，協調其他設計師

2）UI設計師：設計2D的圖表、表格、标題、指标卡、icon等視覺元素

3）建模設計師：設計和制作三維模型及其場景動效

故事線、原型确認無誤後，主設計師開始敲定視覺風格，統籌設計師資源，此階段主設計師需要把控的内容包括設計理念、主色調、主視覺質感（3D模型部分）、圖表風格等。

3D汽車demo視覺稿

主設計師統籌設計出視覺稿後，與項目經理确認設計元素的技術可行性，例如某些3D動效、圖表交互事件等是否能實現，才能定下最終的視覺稿。

實施調整的過程并不一定在視覺設計之後，例如大屏指标數據的處理和對接一般提前開始，整個調整完善過程中主設計師要把控好整體的視覺效果。

1）大屏數據對接：梳理大屏上的業務指标，從各個業務系統取數、計算，并對接到FineReport

2）建模實施及調整：根據提供的建模對象清單、照片等資料，按照既定的視覺風格制作三維模型

3）前端開發及調整：開發大屏模闆，包括制作二維圖表、集成三維模型、配置數據及交互事件

實施過程中，模闆開發者要與建模設計師保持溝通，确保建模内容能順利對接到FVS。

例如，确定模型動畫是否能被FVS正常調用，動畫是循環播放還是隻播放一次；如何調整模型的材質以在FVS渲染出最好的效果；模型的層級和名稱怎樣編排，才能和數據更好地綁定；……

循環播放動畫

隻播放一次動畫

大屏實施、調整完後，需要在大屏幕上調試。一般而言，在大屏開發前就要根據大屏硬件的分辨率設計模闆，但調試時若發現存在差異，或者要适應多個屏幕，可以在FVS中選擇合适的自适應方式。

FVS支持5種自适應方式，例如“自動自适應”保障模闆像靜态圖片一樣嚴格按照原比例輸出，不拉伸、不變形，而“雙向自鋪滿自适應”可以讓模闆随着浏覽器窗口的寬高變化自動調整，保障鋪滿窗口的同時又不變形。

3D大屏的實施需要各個角色協調一緻，也需要配合好的工具應用。FVS支持導入3D模型後零代碼搭建大屏，大大降低了3D大屏的開發門檻~

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!