Posted on 2014-07-08 10:02
TWaver 閱讀(4924)
評論(5) 編輯 收藏
在項目開發(fā)組的努力下，HTML5 3D 的開發(fā)包變得越來越優(yōu)秀，越來越健壯；基于HTML5 3D技術(shù)的MONO Design建模平臺功能也變得越來越強大和完善，這個方便了很多使用我們HTML5 3D的用戶。 但是對于使用TWaver Flex 3D的用戶而言，有個小小的遺憾就是：整個MONO Design是面向HTML5 3D技術(shù)的，而不是Flex 3D的。其實不然，雖然MONO Design本身不是Flex開發(fā)的，但是它卻可以與Flex 2D、Flex 3D技術(shù)無縫集成。簡單說：MONO Design所有建模的東西，都可以直接在Flex 3D中使用。您還管它MONO Design是什么技術(shù)開發(fā)的呢？
最新版的TWaver Flex3D，不但可以支持上萬的3D對象、更高的效率，而且可以直接支持HTML5 3D的json格式和各種3D對象。也就是說，MONO Design設(shè)計的任何3D場景，都可以無縫的直接轉(zhuǎn)出并顯示到Flex中，呈現(xiàn)效果完相同。導(dǎo)入的代碼也是很簡單的, 只需要幾行代碼就可以：
1 | network3d.elementBox.clear(); |
2 | var jsonSerializer:JsonSerializer3D = newJsonSerializer3D(network3d.elementBox,null,'html5'); |
3 | jsonSerializer.deserializeHtml5(json); |
基于此適配功能，F(xiàn)lex3D的用戶也就完全可以使用HTML5 3D的編輯器功能了，只需要把HTML5 3D編輯器的結(jié)果導(dǎo)出到j(luò)son，然后在Flex3D里面導(dǎo)入即可。事實上我們的HTML5 3D編輯器里面本身就有一個導(dǎo)出到Flex3D的功能。且看詳細(xì)分解：
首先，打開我們的HTML5 3D編輯器MONO DESIGN：
然后拖出一個房間，一個設(shè)備和一個Billboard，同時在房間上加上門窗:
修改房間的貼圖，上一個好看的貼圖：
點擊“3D”按鈕切換到3D場景，展示效果如下：
然后我們點擊“File”菜單下面的 “Export to Flex3D”項，會彈出一個新的Flex3D的窗口，展示效果如下：
可以看出，F(xiàn)lex3D的場景中房間，門窗，設(shè)備，billboard等的位置，貼圖以及貼圖的平鋪效果，以及門窗的透明度都和HTML5 3D一致。
MONO Design作為統(tǒng)一的建模平臺，將負(fù)責(zé)TWaver的2D和3D以及各種技術(shù)平臺的數(shù)據(jù)模型創(chuàng)建，而不僅僅是局限于HTML5或Flex。這也是MONO Design產(chǎn)品的定位所在。如果您對此感興趣，歡迎申請產(chǎn)品試用，也可以訪問www.mono-design.cn在線編輯平臺體驗可視化建模的樂趣！