記得15年那會兒，我給人講WebGL，還得從頭科普，三令五申要用Chrome，末了再強調一句，記得啟用WebGL功能。今天，但凡懂點兒Web開發的，都會來一句“網頁3D用WebGL”。

怎麼形容這種感受呢？

這兩年的技術發展，大家想必都看在眼裡，單用“爆發”二字，實在難以描述其中的驚天鉅變。而回到網頁3D這個話題上，我想，最大的驅動力，莫過於16年至今虛擬現實的迅速崛起，徹底推進了三維可視化技術的突飛猛進，而物聯網發力，又開啟了一扇通往新世界的大門。

推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。

遊戲界至今爭論不休的Unity還是HTML5，依我看至少WebGL活的好好的，而插件技術麼，則讓我想起了一首悲傷的歌：dying in the sun…

三維可視化應用盤點

今天當然還是給大家介紹一款最新的三維可視化成果，開始正題前，我想先盤點一下這兩年還算靠譜的一些三維應用。

工業上的，偏銷售側有複雜零件的三維展示，依託零件原有模型，做好參數轉換，比較容易實現。偏管理側，主要是廠房車間和生產設備的三維監控； 電力行業 ，有無人值守變電站的巡檢和監控，結合三維可以進行遠程巡檢作業，降低人工作業的風險； 倉庫和糧倉 ，引入三維後，可以結合庫房系統、環境系統，進行全方位的管理； 礦山和隧道 ，這個很好理解：作業越是危險、對環境要求越高的地方，越是需要虛擬仿真； 3D家裝設計 , 通常是在線模式，拖拽設計，結合傢俱販售，早先是以Stage3D為主，這兩年也看到很多WebGL的案例； 博物館、圖書館、檔案館 的導覽結合解說，複雜設備的虛擬仿真 培訓 ， 商品展示 ，這個比較多了，像虛擬試衣間，商品的三維在線瀏覽，比如剛看到這款霸氣側漏的零食：

開個玩笑。其實不管哪個行業，三維應用很大的一部分工作量源於建模，而這次我們想分享的是和上述應用完全不同的一個案例。

正文

這次的案例，對模型幾乎沒有要求，只是用了最基本的形狀元素，但是卻可以解決企業在不斷髮展壯大，尤其是信息化進程不斷深入的過程中，都會遇到的問題，那就是如何將 複雜流程可視化 。

什麼是流程？

流程，看起來很簡答的兩個字，英文process。我們這裡所說的流程，主要是企業的 業務流程，如生產流程、各類行政申請流程、財務審批流程、人事處理流程、質量控制及客服流程等等。

業務流程對於企業的意義不僅僅在於對企業關鍵業務的一種描述；更在於對企業的業務運營有著指導意義，這種意義體現在對資源的優化、對企業組織機構的優化以及對管理制度的一系列改變。這種優化的目的實際也是企業所追求的目標：降低企業的運營成本，提高對市場需求的響應速度，爭取企業利潤的最大化。（from智庫百科MBAlib）

為啥我突然開始拽商業名詞了呢？因為，這是甲方爸爸給出的一個難題。

甲方爸爸的企業，部門繁多，流程複雜，為了提升業務流程的效率，同時優化企業自身的管理，提出了一個將其現有業務流程進行三維可視化的需求。

為什麼要把流程進行三維可視化呢？

通俗的說，因為平面的實在是看不清理不順了；時髦點講，只有 “升維” ，才能展示和包容更多的信息。

看到這裡的三體同好們，請不要吝嗇向我隔空揮舞小手！

舉個栗子

甲方爸爸的信息實在太多，而且不能透露，我們就找其中幾個簡單的舉個例子，比如每個企業每天都在處理的報賬流程：

報賬流程業務圖：

二層邏輯交互圖：

報賬業務基礎架構：

看到這裡，無論你是以下哪種表情，都不要驚慌：

流程結構梳理

我們先簡單梳理下流程圖的大致框架，一共可以分為五層：

• 業務流程層：起點、審批、服務；

• 應用邏輯層：WEB服務、數據庫服務、定時作業服務、接口服務、應用服務；

• 實例：WEB服務實例、財輔數據庫實例、支付服務實例；

• OS：EB服務OS、財輔數據庫OS；

• 硬件：主機、交換機。

初稿

為了讓這五層之間的關係一目瞭然，分層展示是必不可少的。每個層次裡，又分為幾個模塊，層次與層次、模塊與模塊之間都有業務上的聯繫。根據梳理的邏輯關係，我先整了一個初稿。流程和業務先用簡單的方塊和圓柱代替，底層的機櫃模型，直接用存貨模型，機房相關的模型，我們大大的有。

雖然看起來層次感有了，不過這只是個整體的框架demo，我們在這基礎上一步步修改。

圓弧效果

說下層模型的圓弧效果。為了把每個層做成圓弧的效果，我把層模型拆解成了由9個簡單模型組合而成，上圖給你們看（原諒我圖畫得渣渣）。

模型1、2、3、4、5均為厚度相同的立方體，模型6、7、8、9為大小相等的1/4圓柱體，9個模型組合成層模型。

模型1的代碼：（模型1,2,3,4,5差不多，就只貼模型1的代碼了。）

var centerNode = new mono.Cube({width: width,height: height,depth: depth,});centerNode.s({ 'm.type': 'phong', 'm.color': color});

模型6的代碼：

var leftTopCylinder = new mono.Cylinder({ radiusTop: radius, radiusBottom: radius, height: height, arcLength: Math.PI / 2, //圓柱的圓弧所佔長度arcStart: Math.PI //圓弧開始的角度});leftTopCylinder.s({ 'm.type': 'phong', 'm.color': color});leftTopCylinder.p(-width / 2, 0, -depth / 2);

9個模型合併：

var combo = new mono.ComboNode([centerNode, leftNode, rightNode, topNode, bottomNode, leftTopCylinder, rightTopCylinder, leftBottomCylinder,  rightBottomCylinder],['+'],true);

背景和配色

首先，增加了背景圖片，選取的是一張星空的圖片，之後根據背景修改了配色和部分模型。

效果還是不錯的，看起來更加大氣。增加背景代碼：

network.setClearColor(0, 0, 0);network.setClearAlpha(0);network.setBackgroundImage('./images/background.jpg');

文字

圖中顯示文字類似對話框的東西其實是billboard，先創建一個billboard，再用canvas畫一張圖作為貼圖貼到上面就可以了。

var billboard = new mono.Billboard();var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); context.font = "130px 微軟雅黑"; var array = []; if (text.indexOf("\n")) {array = text.split("\n");} else {array = [text]} var length = 0; for (var i = 0; i < array.length; i++) { if (i == 0) {length = context.measureText(array[i]).width;} else {length = Math.max(context.measureText(array[i]).width, length);}} var size = mono.Utils.getMaxTextSize(array, context.font); var width = mono.Utils.nextPowerOfTwo(length); var oHeight = size.height; var arrowHeight = 40; var arrowWidth = 80; var height = mono.Utils.nextPowerOfTwo(oHeight + arrowHeight);canvas.height = height;canvas.width = width; var lineHeight =(height - arrowHeight - 40) / array.length; var oLineHeight = oHeight / array.length; var radius = width / 16; var context = canvas.getContext('2d'); context.globalAlpha = 0.9; context.fillStyle = bgColor; context.save(); context.beginPath(); context.moveTo(radius + 10, 10); context.lineTo(width - radius - 10, 10); context.arcTo(width - 10, 10, width - 10, radius + 10, radius); context.lineTo(width - 10, height - arrowHeight - radius - 10); context.arcTo(width - 10, height - arrowHeight - 10, width - radius -10, height - arrowHeight - 10, radius); context.lineTo(width / 2 + arrowWidth / 2 - 10, height - arrowHeight - 10); context.lineTo(width / 2 - 10, height - 10); context.lineTo(width / 2 - arrowWidth / 2 - 10, height - arrowHeight - 10); context.lineTo(radius + 10, height - arrowHeight - 10); context.arcTo(10, height - arrowHeight - 10, 10, height - arrowHeight - radius - 10, radius); context.lineTo(10, radius + 10); context.arcTo(10, 10, radius + 10, 10, radius); context.closePath(); context.fill(); context.globalAlpha = 1; context.lineWidth = 10; context.strokeStyle = bgColor; context.stroke(); context.restore(); context.fillStyle = fontColor; context.textBaseline = 'middle'; context.font = "120px 微軟雅黑"; for (var i = 0; i < array.length; i++) { var text = array[i];length = context.measureText(text).width; context.fillText(text, (width - length) / 2, lineHeight * (i + 0.5));}billboard.s({'m.texture.image': canvas,'m.texture.offset': new mono.Vec2(0, 0.005),'m.texture.anisotropy': 8,'m.alignment': mono.BillboardAlignment.bottomCenter});

obj模型

這兩種屬於obj模型，是設計小姐姐做的，然後我們通過make.Default.register函數定義模型，通過make.Default.load函數加載使用模型。

為了使效果更逼真，我們給模型做了環境貼圖。

object3d.setStyle('m.envmap.image', make.Default.getEnvMap('envmap5'));

動畫

單純的靜態圖看起來有些單調，所以我們給連線加了動畫效果：找一張一半透明一半有顏色的圖片，作為貼圖貼在連線上，利用動畫函數使貼圖不斷平移，就實現了下面的效果。

實體模型

最底層的模型採用了實體模型，真實感更強：

嵌套關係

上面也提到過，層與層、層內各個模塊中之間存在錯綜複雜的多層嵌套關係，為了展現這種關係，那肯定就要連線，話不多說，直接上圖。

線的類型有兩種，層與層之間的連線類型是link，每層模塊之間的連線類型是pathLink，創建pathLInk代碼如下：

createPathLink: function (data) { var box = main.sceneManager.getDataBox(); var fromNode = main.sceneManager.getNodeByDataOrId(data.fromId);  var toNode = main.sceneManager.getNodeByDataOrId(data.toId);  var radius = data.path.radius || 3;  var color = data.path.color || 'yellow';  var endCap = data.path.endCap;  var startCap = data.path.startCap;  var linkType = data.routeType;  var flow = data.path.flow || '';  var workflowId = data.workflowId || '';if (fromNode && toNode) { var link = new mono.PathLink(fromNode, toNode, data.id); var plength = link.getPath().getLength();link.setRadius(radius);link.s({ 'm.type': 'phong', 'm.color': color, 'm.ambient': color});link.workflowId = workflowId; if (endCap) { var endCapSize = data.path.endCapSize || 10; var endCapR = data.path.endCapR || 2;link.setEndCap(endCap);link.setEndCapSize(endCapSize);link.setEndCapR(endCapR);} if (startCap) { var startCapSize = data.path.startCapSize || 10; var startCapR = data.path.startCapR || 2;link.setStartCap(startCap);link.setStartCapSize(startCapSize);link.setStartCapR(startCapR);} if (linkType) {link.setLinkType(linkType);}box.add(link);}}

link類型連線與pathLink類型連線大體相同，之所以層與層之間選擇link類型，有兩個原因：一是當鏡頭拉近時，link類型的連線粗細不會改變，二是便於控制拐點，就是下圖中的紅圈處。

link.setLinkType('control');//control屬性控制連線的拐點link.setControls(controls);//controls為數組

這樣就可以呈現圖中的傘狀效果啦。

為了增加點朦朧感以及讓傘狀效果更好，我們特意添加了一點光環，有沒有感覺金光從天而降呢？此時請想象自己45°角仰望天空，金光照在臉上。

流程動畫

基礎打好，下面就可以加上動畫，執行流程了。先上圖：

點擊左邊的按鈕，出現圖中的白色小球，沿著連線運動，完整展現整個流程步驟。當然，鏡頭會隨著小球切換，這樣小球時刻在視線正中，媽媽再也不用擔心我的視線被擋住。

鏡頭切換的代碼也很簡單：

var pos = link.getPointAt(v);workflowSphere.p(pos);billboard.p(pos.clone().add(new mono.Vec3(0, 250, 0)));var camera = main.sceneManager.network3d.getCamera();camera.lookAt(pos);camera.p(pos.clone().sub(this._cameraOffset));

數據

最後聊聊數據。為了方（tou）便(lan)，我們將流程圖的所有數據都存放在後臺。在後端頁面，可以設置流程圖的結構、邏輯、流程節點的樣式等。

利用Ajax獲取模型數據，然後三行代碼便可建造一個3D流程圖系統。

dataManager.addCategoryFromJson(loadData.categories);dataManager.addDataTypeFromJson(loadData.datatypes);dataManager.addDataFromJson(loadData.datas);

同樣，可以在後端頁面設置連線的樣式、顏色、起點、終點等等，獲取到連線數據後，利用上文提到的方法便可繪製出所需要的連線。連動畫的起點、走向同樣可以在後端頁面設置。

推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。

如果甲方爸爸覺得某個流程有問題，需要修改時，不要怕，默默打開後端頁面改幾個節點就好了。速度這麼快，快誇我快誇我。

總而言之，只需要通過數據配置即可生成不同的三維流程，滿足客戶的各種需求。

對demo感興趣的同學，可以給我發郵件：[email protected]，甲方爸爸的數據不能給你，demo還是可以給你們看一眼的。