TWaver提供了一套3D場(chǎng)景的開(kāi)發(fā)包，用來(lái)幫助用戶快速搭建3D場(chǎng)景，實(shí)現(xiàn)3D的監(jiān)控系統(tǒng)。這個(gè)開(kāi)發(fā)包目前商推的只有Flex框架下的版本，被稱為TWaver3D for Flex。開(kāi)發(fā)包提供簡(jiǎn)單的API，用戶向TWaver的數(shù)據(jù)對(duì)象（例如Node）中設(shè)定相關(guān)的3D style，就可以構(gòu)建出一套3D場(chǎng)景。（詳細(xì)的使用方式請(qǐng)參考產(chǎn)品包中的
為了簡(jiǎn)化用戶使用代碼搭建3D場(chǎng)景的復(fù)雜度，TWaver還提供了一個(gè)可視化的編輯工具，用于幫助用戶編輯3D場(chǎng)景，然后將場(chǎng)景轉(zhuǎn)換為可讀的xml文件。需要再現(xiàn)場(chǎng)景的時(shí)候，用戶只需要將這份圖紙載入系統(tǒng)，實(shí)現(xiàn)所見(jiàn)即所得的目的。用戶加載完圖紙后，就可以根據(jù)設(shè)計(jì)圖紙的時(shí)候設(shè)定的數(shù)據(jù)綁定關(guān)系，實(shí)現(xiàn)實(shí)時(shí)系統(tǒng)監(jiān)控信息的綁定。
現(xiàn)在就讓我給大家詳細(xì)的介紹一下如何使用Editor工具設(shè)計(jì)3D場(chǎng)景，如何綁定實(shí)時(shí)數(shù)據(jù)。
第一步當(dāng)然是打開(kāi)Editor，加載預(yù)定義的3D模型，初始化設(shè)計(jì)環(huán)境。
ps:Editor這個(gè)工具采用了Flex的module機(jī)制，允許用戶將預(yù)定義的3D模型資源打包成module，然后通過(guò)Editor進(jìn)行動(dòng)態(tài)加載到編輯環(huán)境中（擴(kuò)展動(dòng)態(tài)模塊的話題我們下章細(xì)聊）。
點(diǎn)擊上圖的“確定”按鈕后，Editor就會(huì)在同根目錄下尋找相關(guān)module。根據(jù)Flex的設(shè)計(jì)，這些module都被打包成為swf文件，如果用戶使用HTTP服務(wù)器發(fā)布起Editor的話，需要把這些module的swf文件放在Editor.swf 的同根目錄下。
加載成功后，在模塊中預(yù)定義的模型就會(huì)呈現(xiàn)在Eidtor左側(cè)的資源欄中。
預(yù)定義的模型加載進(jìn)來(lái)之后，我們就可以著手設(shè)計(jì)我們的3D場(chǎng)景了。Editor目前采用的是2D方式編輯，3D場(chǎng)景展現(xiàn)的方式。例如我們現(xiàn)在建立一個(gè)小房間，房間內(nèi)設(shè)置一個(gè)機(jī)柜。
在編輯的時(shí)候，需要強(qiáng)調(diào)的一點(diǎn)是這個(gè)里面的BID屬性，在Editor工具中，對(duì)于可以將來(lái)用于監(jiān)控的對(duì)象設(shè)定了一個(gè)Business ID屬性，就是用來(lái)與客戶自己系統(tǒng)模型中具體設(shè)備的ID相關(guān)聯(lián)用的，這個(gè)屬性被存在了TWaver的ClientProperty里（本文后面會(huì)介紹此處的用法）。
我們從視圖上如果看到場(chǎng)景設(shè)計(jì)達(dá)到目標(biāo)了，就可以將場(chǎng)景存為xml文件，以備監(jiān)控程序加載使用。
我們將其另存成名為common.xml的圖紙。
圖紙片段如下
<data type='twaver.Element' ref='7' id='EF576749-1DD2-39D0-7FFD-0B7B913ABCF8'>
<s n='physical.size.t3d' x='60' y='120' z='60'/>
<s n='mapping.common.path.t3d'>XZRack3D1</s>
<s n='mapping.type.t3d'>map6</s>
<s n='scene.location.t3d' x='-148.5' y='60' z='117.5'/>
<s n='both.sides.visible.t3d'>true</s>
<c n='itemid'>XZ1</c>
<c n='bid'>custom1</c>
</data>
有了這份圖紙我們就可以在監(jiān)控系統(tǒng)載入的時(shí)候，將圖紙載入系統(tǒng)，直接呈現(xiàn)3D場(chǎng)景了。
[Embed(source="images/XZRack3D1.png")]
public static const XZRack3D1:Class;
private function init():void{
twaver.threed.util.Util3D.registVector3D();
twaver.Utils.registerImageByClass("XZRack3D1",XZRack3D1);
var network:Network3D = new Network3D();
network.applyHoverCamera(-180,10,5,1000);
this.addElement(network);
var box:ElementBox = network.elementBox;
network.tiltAngleLowLimit = 0;
network.tiltAngleUpLimit = 15;
var xs:XMLSerializer3D=new XMLSerializer3D(box);
xs.deserialize(scene);
}
ps:由于我們的模型中，用來(lái)渲染機(jī)柜的圖片定義成了XZRack3D1，所以我們?cè)谏厦娴拇a里需要把資源注冊(cè)進(jìn)來(lái)。
載入圖紙之后，我們就可以看到一個(gè)在Editor中設(shè)計(jì)完成的場(chǎng)景了。
話題引申開(kāi)，畢竟僅僅加載一個(gè)3D場(chǎng)景還不是我們的目的，我們還會(huì)希望能夠把我們的監(jiān)控信息追加到3D場(chǎng)景上，實(shí)現(xiàn)我們監(jiān)控系統(tǒng)的3D化。那么這個(gè)時(shí)候，我們前面提到的Business ID就起到作用了。
//注冊(cè)數(shù)據(jù)類型，用來(lái)解讀bid屬性
twaver.SerializationSettings.registerGlobalClient("bid","String");
......
var finder:QuickFinder = new QuickFinder(box,"bid","client");
var els:Array = finder.find("custom1");
var alarm:Alarm = new Alarm(null,els[0].id,AlarmSeverity.CRITICAL);
box.alarmBox.add(alarm);
那么我們就可以直接讀取映射在圖紙中的業(yè)務(wù)id屬性，用來(lái)滿足用戶動(dòng)態(tài)綁定數(shù)據(jù)
這樣我們就完成了應(yīng)用程序加載預(yù)設(shè)計(jì)的圖紙，并實(shí)現(xiàn)數(shù)據(jù)綁定的功能了。ok，動(dòng)動(dòng)手指就可以把你的2D變3D，趕緊來(lái)試一下吧。
后續(xù)文章
如何自定義模型module；
圖紙的二次編輯。