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

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

1、需求背景調(diào)研

在3D大屏設(shè)計開工之前，我們需要調(diào)研大屏應(yīng)用場景、最終用戶的業(yè)務(wù)訴求、建模范圍、3D風(fēng)格偏好等，這些決定了一個3D大屏的基調(diào)。

1）應(yīng)用場景：3D大屏的業(yè)務(wù)訴求一般分展示類和實時監(jiān)控類，還需了解不同場景所用的大屏硬件及分辨率。

2）業(yè)務(wù)訴求：了解大屏的需求方希望通過3D大屏達到什么樣的業(yè)務(wù)目的。

3）建模范圍：針對現(xiàn)實世界的什么物體建模，需提供建模對象清單及必要的照片、視頻和圖紙。

4）3D風(fēng)格：3D建模風(fēng)格一般分為“科幻”和“寫實”兩大類，科幻類又可分為“貼圖”和“線框”風(fēng)格，最好讓客戶根據(jù)示例demo選擇目標(biāo)風(fēng)格。

下面以“新概念汽車介紹”這個3D demo為例向大家介紹（該場景根據(jù)真實客戶案例改編而成，場景內(nèi)數(shù)據(jù)純屬虛擬）。

該3D大屏的業(yè)務(wù)需求方是一個大型汽車制造企業(yè)的市場營銷部門，需要在大型展會上通過3D可視化大屏向參展者展示某款最新研制的汽車，從而向下游分銷商、最終客戶、政企領(lǐng)導(dǎo)等展示公司的設(shè)計、研發(fā)和生產(chǎn)能力，并起到一定的科普作用，助力該款新車型上市后的銷售業(yè)績。

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

寫實風(fēng)格車身 科幻風(fēng)格背景

業(yè)務(wù)方希望3D模型以寫實風(fēng)格為主，適當(dāng)輔以科幻元素，即盡量還原汽車本身的形狀、材質(zhì)、色澤，但結(jié)合一些科幻效果的變化，3D環(huán)境背景則希望以科幻風(fēng)格呈現(xiàn)。

2、輸出3D故事線

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

故事線首先由業(yè)務(wù)方梳理提出，以3D汽車demo為例，業(yè)務(wù)方要求重點呈現(xiàn)汽車的動力系統(tǒng)、車身外觀和內(nèi)飾三個部分：

1）動力系統(tǒng)：既需要汽車奔馳在公路上的動態(tài)效果，也需要細看動力系統(tǒng)的硬件構(gòu)成的效果

2）車身外觀：既有360°自動旋轉(zhuǎn)的展示方式，又有靜態(tài)查看細節(jié)的方式

3）汽車內(nèi)飾：主要關(guān)注中控臺、主駕和后座三部分，用戶可以自己切換想看的部分

先由3D大屏項目經(jīng)理與業(yè)務(wù)方一起梳理出以下故事場景：

緊接著，項目經(jīng)理需要把業(yè)務(wù)方的故事場景“翻譯”成demo制作的故事線，即通過什么交互事件觸發(fā)3D模型、2D圖表組件等可視化元素發(fā)生什么變化，呈現(xiàn)出什么樣的效果。

3、確定原型demo

傳統(tǒng)的大屏項目的一般用框線示意圖繪制簡單的藍圖，但基于FVS，用戶可以直接使用設(shè)計器拖拉圖表繪制藍圖，不需要頻繁調(diào)整、預(yù)覽，甚至不需要太多虛擬數(shù)據(jù)，F(xiàn)VS自帶的圖表樣式就能滿足原型demo的繪制。

再結(jié)合點選式的交互事件配置，一個可交互、可演示的大屏demo就做好了。項目經(jīng)理拿著這個藍圖，可以給業(yè)務(wù)方再演繹一遍故事線，確認原型無誤后再投入視覺設(shè)計。

4、視覺設(shè)計

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

1）主設(shè)計師：負責(zé)與項目經(jīng)理溝通，確定和把控整體的視覺風(fēng)格，協(xié)調(diào)其他設(shè)計師

2）UI設(shè)計師：設(shè)計2D的圖表、表格、標(biāo)題、指標(biāo)卡、icon等視覺元素

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

故事線、原型確認無誤后，主設(shè)計師開始敲定視覺風(fēng)格，統(tǒng)籌設(shè)計師資源，此階段主設(shè)計師需要把控的內(nèi)容包括設(shè)計理念、主色調(diào)、主視覺質(zhì)感（3D模型部分）、圖表風(fēng)格等。

3D汽車demo視覺稿

主設(shè)計師統(tǒng)籌設(shè)計出視覺稿后，與項目經(jīng)理確認設(shè)計元素的技術(shù)可行性，例如某些3D動效、圖表交互事件等是否能實現(xiàn)，才能定下最終的視覺稿。

5、實施及調(diào)整

實施調(diào)整的過程并不一定在視覺設(shè)計之后，例如大屏指標(biāo)數(shù)據(jù)的處理和對接一般提前開始，整個調(diào)整完善過程中主設(shè)計師要把控好整體的視覺效果。

1）大屏數(shù)據(jù)對接：梳理大屏上的業(yè)務(wù)指標(biāo)，從各個業(yè)務(wù)系統(tǒng)取數(shù)、計算，并對接到FineReport

2）建模實施及調(diào)整：根據(jù)提供的建模對象清單、照片等資料，按照既定的視覺風(fēng)格制作三維模型

3）前端開發(fā)及調(diào)整：開發(fā)大屏模板，包括制作二維圖表、集成三維模型、配置數(shù)據(jù)及交互事件

實施過程中，模板開發(fā)者要與建模設(shè)計師保持溝通，確保建模內(nèi)容能順利對接到FVS。

例如，確定模型動畫是否能被FVS正常調(diào)用，動畫是循環(huán)播放還是只播放一次；如何調(diào)整模型的材質(zhì)以在FVS渲染出最好的效果；模型的層級和名稱怎樣編排，才能和數(shù)據(jù)更好地綁定；……

循環(huán)播放動畫

只播放一次動畫

6、確認及上屏調(diào)試

大屏實施、調(diào)整完后，需要在大屏幕上調(diào)試。一般而言，在大屏開發(fā)前就要根據(jù)大屏硬件的分辨率設(shè)計模板，但調(diào)試時若發(fā)現(xiàn)存在差異，或者要適應(yīng)多個屏幕，可以在FVS中選擇合適的自適應(yīng)方式。

FVS支持5種自適應(yīng)方式，例如“自動自適應(yīng)”保障模板像靜態(tài)圖片一樣嚴(yán)格按照原比例輸出，不拉伸、不變形，而“雙向自鋪滿自適應(yīng)”可以讓模板隨著瀏覽器窗口的寬高變化自動調(diào)整，保障鋪滿窗口的同時又不變形。

3D大屏的實施需要各個角色協(xié)調(diào)一致，也需要配合好的工具應(yīng)用。FVS支持導(dǎo)入3D模型后零代碼搭建大屏，大大降低了3D大屏的開發(fā)門檻~

現(xiàn)在回復(fù)“3D”，即可領(lǐng)取FVS大屏激活碼、學(xué)習(xí)資料和免費的3D模板文件，快來開啟酷炫又快捷的3D大屏體驗吧！