在MONO Design中使用Flex3D
在项目开发组的努力下,HTML5 3D 的开发包变得越来越优秀,越来越健壮;基于HTML5 3D技术的MONO Design建模平台功能也变得越来越强大和完善,这个方便了很多使用我们HTML5 3D的用户。 但是对于使用TWaver Flex 3D的用户而言,有个小小的遗憾就是:整个MONO Design是面向HTML5 3D技术的,而不是Flex 3D的。其实不然,虽然MONO Design本身不是Flex开发的,但是它却可以与Flex 2D、Flex 3D技术无缝集成。简单说:MONO Design所有建模的东西,都可以直接在Flex 3D中使用。您还管它MONO Design是什么技术开发的呢?
最新版的TWaver Flex3D,不但可以支持上万的3D对象、更高的效率,而且可以直接支持HTML5 3D的json格式和各种3D对象。也就是说,MONO Design设计的任何3D场景,都可以无缝的直接转出并显示到Flex中,呈现效果完相同。导入的代码也是很简单的, 只需要几行代码就可以:
1 |
network3d.elementBox.clear(); |
2 |
var jsonSerializer:JsonSerializer3D = new JsonSerializer3D(network3d.elementBox, null , 'html5' ); |
3 |
jsonSerializer.deserializeHtml5(json); |
基于此适配功能,Flex3D的用户也就完全可以使用HTML5 3D的编辑器功能了,只需要把HTML5 3D编辑器的结果导出到json,然后在Flex3D里面导入即可。事实上我们的HTML5 3D编辑器里面本身就有一个导出到Flex3D的功能。且看详细分解:
首先,打开我们的HTML5 3D编辑器MONO DESIGN:
然后拖出一个房间,一个设备和一个Billboard,同时在房间上加上门窗:
修改房间的贴图,上一个好看的贴图:
点击“3D”按钮切换到3D场景,展示效果如下:
然后我们点击“File”菜单下面的 “Export to Flex3D”项,会弹出一个新的Flex3D的窗口,展示效果如下:
可以看出,Flex3D的场景中房间,门窗,设备,billboard等的位置,贴图以及贴图的平铺效果,以及门窗的透明度都和HTML5 3D一致。
MONO Design作为统一的建模平台,将负责TWaver的2D和3D以及各种技术平台的数据模型创建,而不仅仅是局限于HTML5或Flex。这也是MONO Design产品的定位所在。如果您对此感兴趣,欢迎申请产品试用,也可以访问www.mono-design.cn在线编辑平台体验可视化建模的乐趣!