FVS，用零代碼實(shí)現(xiàn)3D大屏，3D原來(lái)這么簡(jiǎn)單
酷炫的3D大屏被越來(lái)越多的企業(yè)用戶(hù)需要，但開(kāi)發(fā)一套3D大屏對(duì)大部分IT用戶(hù)而言都是陌生的。如果沒(méi)有定制化開(kāi)發(fā)的外部實(shí)施團(tuán)隊(duì)，企業(yè)IT部門(mén)該如何開(kāi)發(fā)一套3D大屏呢？
帆軟大屏團(tuán)隊(duì)基于已有的FVS項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)，整理了這套3D大屏設(shè)計(jì)開(kāi)發(fā)方法論，并舉例一個(gè)“3D汽車(chē)介紹”場(chǎng)景的實(shí)戰(zhàn)demo，幫助大家理順3D大屏的項(xiàng)目流程！
1、需求背景調(diào)研
在3D大屏設(shè)計(jì)開(kāi)工之前，我們需要調(diào)研大屏應(yīng)用場(chǎng)景、最終用戶(hù)的業(yè)務(wù)訴求、建模范圍、3D風(fēng)格偏好等，這些決定了一個(gè)3D大屏的基調(diào)。
1）應(yīng)用場(chǎng)景：3D大屏的業(yè)務(wù)訴求一般分展示類(lèi)和實(shí)時(shí)監(jiān)控類(lèi)，還需了解不同場(chǎng)景所用的大屏硬件及分辨率。
2）業(yè)務(wù)訴求：了解大屏的需求方希望通過(guò)3D大屏達(dá)到什么樣的業(yè)務(wù)目的。
3）建模范圍：針對(duì)現(xiàn)實(shí)世界的什么物體建模，需提供建模對(duì)象清單及必要的照片、視頻和圖紙。
4）3D風(fēng)格：3D建模風(fēng)格一般分為“科幻”和“寫(xiě)實(shí)”兩大類(lèi)，科幻類(lèi)又可分為“貼圖”和“線框”風(fēng)格，最好讓客戶(hù)根據(jù)示例demo選擇目標(biāo)風(fēng)格。
下面以“新概念汽車(chē)介紹”這個(gè)3D demo為例向大家介紹（該場(chǎng)景根據(jù)真實(shí)客戶(hù)案例改編而成，場(chǎng)景內(nèi)數(shù)據(jù)純屬虛擬）。
該3D大屏的業(yè)務(wù)需求方是一個(gè)大型汽車(chē)制造企業(yè)的市場(chǎng)營(yíng)銷(xiāo)部門(mén)，需要在大型展會(huì)上通過(guò)3D可視化大屏向參展者展示某款最新研制的汽車(chē)，從而向下游分銷(xiāo)商、最終客戶(hù)、政企領(lǐng)導(dǎo)等展示公司的設(shè)計(jì)、研發(fā)和生產(chǎn)能力，并起到一定的科普作用，助力該款新車(chē)型上市后的銷(xiāo)售業(yè)績(jī)。
應(yīng)用場(chǎng)所是大型展廳，有多塊LED小屏幕拼接成長(zhǎng)寬比為16:9的大屏幕。
寫(xiě)實(shí)風(fēng)格車(chē)身 科幻風(fēng)格背景
業(yè)務(wù)方希望3D模型以寫(xiě)實(shí)風(fēng)格為主，適當(dāng)輔以科幻元素，即盡量還原汽車(chē)本身的形狀、材質(zhì)、色澤，但結(jié)合一些科幻效果的變化，3D環(huán)境背景則希望以科幻風(fēng)格呈現(xiàn)。
2、輸出3D故事線
3D故事線是指，該大屏如何依次呈現(xiàn)各個(gè)3D場(chǎng)景，組合成一個(gè)大屏故事。
故事線首先由業(yè)務(wù)方梳理提出，以3D汽車(chē)demo為例，業(yè)務(wù)方要求重點(diǎn)呈現(xiàn)汽車(chē)的動(dòng)力系統(tǒng)、車(chē)身外觀和內(nèi)飾三個(gè)部分：
1）動(dòng)力系統(tǒng)：既需要汽車(chē)奔馳在公路上的動(dòng)態(tài)效果，也需要細(xì)看動(dòng)力系統(tǒng)的硬件構(gòu)成的效果
2）車(chē)身外觀：既有360°自動(dòng)旋轉(zhuǎn)的展示方式，又有靜態(tài)查看細(xì)節(jié)的方式
3）汽車(chē)內(nèi)飾：主要關(guān)注中控臺(tái)、主駕和后座三部分，用戶(hù)可以自己切換想看的部分
先由3D大屏項(xiàng)目經(jīng)理與業(yè)務(wù)方一起梳理出以下故事場(chǎng)景：
緊接著，項(xiàng)目經(jīng)理需要把業(yè)務(wù)方的故事場(chǎng)景“翻譯”成demo制作的故事線，即通過(guò)什么交互事件觸發(fā)3D模型、2D圖表組件等可視化元素發(fā)生什么變化，呈現(xiàn)出什么樣的效果。
3、確定原型demo
傳統(tǒng)的大屏項(xiàng)目的一般用框線示意圖繪制簡(jiǎn)單的藍(lán)圖，但基于FVS，用戶(hù)可以直接使用設(shè)計(jì)器拖拉圖表繪制藍(lán)圖，不需要頻繁調(diào)整、預(yù)覽，甚至不需要太多虛擬數(shù)據(jù)，F(xiàn)VS自帶的圖表樣式就能滿(mǎn)足原型demo的繪制。
再結(jié)合點(diǎn)選式的交互事件配置，一個(gè)可交互、可演示的大屏demo就做好了。項(xiàng)目經(jīng)理拿著這個(gè)藍(lán)圖，可以給業(yè)務(wù)方再演繹一遍故事線，確認(rèn)原型無(wú)誤后再投入視覺(jué)設(shè)計(jì)。
4、視覺(jué)設(shè)計(jì)
一個(gè)完整的3D大屏設(shè)計(jì)團(tuán)隊(duì)一般有3個(gè)設(shè)計(jì)師角色：
1）主設(shè)計(jì)師：負(fù)責(zé)與項(xiàng)目經(jīng)理溝通，確定和把控整體的視覺(jué)風(fēng)格，協(xié)調(diào)其他設(shè)計(jì)師
2）UI設(shè)計(jì)師：設(shè)計(jì)2D的圖表、表格、標(biāo)題、指標(biāo)卡、icon等視覺(jué)元素
3）建模設(shè)計(jì)師：設(shè)計(jì)和制作三維模型及其場(chǎng)景動(dòng)效
故事線、原型確認(rèn)無(wú)誤后，主設(shè)計(jì)師開(kāi)始敲定視覺(jué)風(fēng)格，統(tǒng)籌設(shè)計(jì)師資源，此階段主設(shè)計(jì)師需要把控的內(nèi)容包括設(shè)計(jì)理念、主色調(diào)、主視覺(jué)質(zhì)感（3D模型部分）、圖表風(fēng)格等。
3D汽車(chē)demo視覺(jué)稿
主設(shè)計(jì)師統(tǒng)籌設(shè)計(jì)出視覺(jué)稿后，與項(xiàng)目經(jīng)理確認(rèn)設(shè)計(jì)元素的技術(shù)可行性，例如某些3D動(dòng)效、圖表交互事件等是否能實(shí)現(xiàn)，才能定下最終的視覺(jué)稿。
5、實(shí)施及調(diào)整
實(shí)施調(diào)整的過(guò)程并不一定在視覺(jué)設(shè)計(jì)之后，例如大屏指標(biāo)數(shù)據(jù)的處理和對(duì)接一般提前開(kāi)始，整個(gè)調(diào)整完善過(guò)程中主設(shè)計(jì)師要把控好整體的視覺(jué)效果。
1）大屏數(shù)據(jù)對(duì)接：梳理大屏上的業(yè)務(wù)指標(biāo)，從各個(gè)業(yè)務(wù)系統(tǒng)取數(shù)、計(jì)算，并對(duì)接到FineReport
2）建模實(shí)施及調(diào)整：根據(jù)提供的建模對(duì)象清單、照片等資料，按照既定的視覺(jué)風(fēng)格制作三維模型
3）前端開(kāi)發(fā)及調(diào)整：開(kāi)發(fā)大屏模板，包括制作二維圖表、集成三維模型、配置數(shù)據(jù)及交互事件
實(shí)施過(guò)程中，模板開(kāi)發(fā)者要與建模設(shè)計(jì)師保持溝通，確保建模內(nèi)容能順利對(duì)接到FVS。
例如，確定模型動(dòng)畫(huà)是否能被FVS正常調(diào)用，動(dòng)畫(huà)是循環(huán)播放還是只播放一次；如何調(diào)整模型的材質(zhì)以在FVS渲染出最好的效果；模型的層級(jí)和名稱(chēng)怎樣編排，才能和數(shù)據(jù)更好地綁定；……
循環(huán)播放動(dòng)畫(huà)
只播放一次動(dòng)畫(huà)
6、確認(rèn)及上屏調(diào)試
大屏實(shí)施、調(diào)整完后，需要在大屏幕上調(diào)試。一般而言，在大屏開(kāi)發(fā)前就要根據(jù)大屏硬件的分辨率設(shè)計(jì)模板，但調(diào)試時(shí)若發(fā)現(xiàn)存在差異，或者要適應(yīng)多個(gè)屏幕，可以在FVS中選擇合適的自適應(yīng)方式。
FVS支持5種自適應(yīng)方式，例如“自動(dòng)自適應(yīng)”保障模板像靜態(tài)圖片一樣嚴(yán)格按照原比例輸出，不拉伸、不變形，而“雙向自鋪滿(mǎn)自適應(yīng)”可以讓模板隨著瀏覽器窗口的寬高變化自動(dòng)調(diào)整，保障鋪滿(mǎn)窗口的同時(shí)又不變形。
3D大屏的實(shí)施需要各個(gè)角色協(xié)調(diào)一致，也需要配合好的工具應(yīng)用。FVS支持導(dǎo)入3D模型后零代碼搭建大屏，大大降低了3D大屏的開(kāi)發(fā)門(mén)檻~
