前言

不知道大家還記不記得這篇HTML5，不只是看上去很美(第三彈：萌萌噠拓撲圖分組),哼(傲嬌臉)，就知道你們忘記了。這個項目是為了展示一個多層的的嵌套關系。

這次，應甲方爸爸的要求，我們利用3D展示了會計報賬的流程圖，同樣涉及到了層與層、層內各個模塊中之間的多層嵌套關系。

概述

簡單梳理下流程圖的大致框架，分為五層：

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

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

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

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

硬件：主機、交換機。

大體框架

為了讓這五層之間的關系一目了然，我們的設計小姐姐提出了以高樓的形式展現，每一層為一樓，層中各個模塊就像是每層樓中的房間，話說這樣一層樓得值多少錢啊，咳咳，好像跑偏了，這不是在談論房價。大概就是下圖這樣子吧，有沒有感覺到層次分明呢？

模型

你們不會以為3D流程圖中的每個模型就是表面看上去這么簡單，NONONO，真是太年輕，他們可是傳說中的掃地僧啊，模不可貌相。

層模型：

(為了看得清楚，特意去掉了背景)

表示每層樓的層模型，可是由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);

obj模型：

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

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

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

對比一下，就知有木有啊。

看起來很清涼有沒有，是不是想買回家當地板，整個夏天就涼涼噠。

此外，不僅做了環境貼圖，還給所有的obj模型繪制了陰影，當模型旋轉在適當的角度時就會出現陰影。繪制陰影則是使用了html5的canvas繪圖，然后再貼到obj模型所在的地板上(估且就稱為地板吧，很形象啊)。

實體模型：

最底層的模型采用了實體模型，真實感更強烈是不是。

嵌套關系

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

線的類型有兩種，層與層之間的連線類型是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);

就問你們厲 ! 不 ! 厲 ! 害 !

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

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

總體而言，只需要通過數據配置即可生成不同的3D流程系統，快速定制客戶所需。

其他版本

有妹紙同事說，3D流程圖整體色彩有點暗沉，能不能做的明亮歡快點。既然妹紙同事提建議，當然要采納。于是。。。。于是我們又做了一個版本，暗沉還是明亮，任君挑選。

后記

篇幅有限，這一篇就先介紹這么多啦。如果大家有什么意見或建議可以發郵件到xxxxx。

總結

以上是生活随笔為你收集整理的cap流程图_3D流程图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。