Posted on 2014-10-11 10:21
TWaver 閱讀(3195)
評(píng)論(1) 編輯 收藏
使用過(guò)MONO編輯器的朋友都應(yīng)該了解MONO中支持一些動(dòng)畫的設(shè)置，比如開門，開窗，彈出設(shè)備，旋轉(zhuǎn)場(chǎng)景，鏡頭巡航等。但如何將這些動(dòng)畫應(yīng)用到自己的場(chǎng)景中呢？比如我們?cè)诰庉嬈髦薪o機(jī)柜定義了動(dòng)畫，怎樣讓做好的機(jī)柜模型加載到自己的場(chǎng)景中并能播放動(dòng)畫呢？別急，我們來(lái)舉個(gè)例子給大家講解一下。
首先我們使用編輯器建一個(gè)機(jī)柜的模型，這里就不給大家演示了，MONO編輯器的平臺(tái)上提供了多種機(jī)柜的模型，我們直接下載一個(gè)模型導(dǎo)出一份json可以了，這里我們直接拿了MONO中公開的“42U標(biāo)準(zhǔn)機(jī)柜”的數(shù)據(jù)并導(dǎo)出了一份數(shù)據(jù)格式保存在本地。
接著可以在自己的場(chǎng)景中將這份數(shù)據(jù)導(dǎo)入進(jìn)來(lái)，代碼如下：
1 | mono.Toolkits.loadTemplateUrl(network3d.getDataBox(),'./equipment.json'); |
在這個(gè)例子中我們通過(guò)在地板上指定幾個(gè)點(diǎn)，點(diǎn)擊確認(rèn)后動(dòng)態(tài)從文件中加載模型數(shù)據(jù)。加載數(shù)據(jù)后我們加上了機(jī)柜從地板上慢慢升級(jí)的動(dòng)畫。這個(gè)動(dòng)畫在mono中已經(jīng)封裝了，我們只需調(diào)用下面的代碼即可：
2 | mono.AniUtil.playAnimation(hostNode, 'scale:top:1:2000:500'); |
導(dǎo)入的模板中保存了動(dòng)畫的屬性，但是雙擊后并不能播放模板中的動(dòng)畫。是因?yàn)檫@些動(dòng)作是加在network上的，我們需要在自己的工程中加上雙擊播放動(dòng)畫的代碼：
1 | network3d.getRootView().addEventListener('dblclick', handleDoubleClick); |
2 | //play animation when double click equipment |
3 | var handleDoubleClick = function(e){ |
4 | var firstClickObject=Utils._findFirstObjectByMouse(network3d,e); |
5 | if(firstClickObject.element) { |
6 | playAnimation(firstClickObject.element); |
加上這段就可以播放雙擊對(duì)象的動(dòng)畫了。
這里我們讓開門和彈出設(shè)備的動(dòng)畫連續(xù)播放，也就是當(dāng)開門動(dòng)畫播放完畢后，我們?cè)倩卣{(diào)一下彈出設(shè)備的動(dòng)畫，代碼如下：
1 | var door = findDatafromChildren(object,101); |
2 | var server = findDatafromChildren(object,102); |
3 | var played = object._played || false; |
4 | console.log(object.__status ,object._played); |
5 | //check animation of element is playing |
6 | if(object.__status && object.__status === "playing") return; |
8 | var animations = [{method:playEquipment,args:[door]}, |
9 | {method:playEquipment,args:[server]}]; |
11 | function playEquipment(equip, callback){ |
12 | mono.AniUtil.playAnimation(equip, equip.getClient('animation'), 1000, 0,null, function(){ |
這樣導(dǎo)入模型文件的動(dòng)畫就做完了，這個(gè)小demo在MONO的1.9版本中已經(jīng)提供了，感興趣的朋友可以到twaver的網(wǎng)站上申請(qǐng)mono最新的下載包。
最后附上一張Demo的截圖，其中綠色地塊表示正準(zhǔn)備創(chuàng)建機(jī)柜的區(qū)域：
