TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定

news/2024/5/19 19:16:52 标签: network, module, flex, 系统监控, 工具, function

TWaver提供了一套3D场景的开发包,用来帮助用户快速搭建3D场景,实现3D的监控系统。这个开发包目前商推的只有Flex框架下的版本,被称为TWaver3D for Flex。开发包提供简单的API,用户向TWaver的数据对象(例如Node)中设定相关的3D style,就可以构建出一套3D场景。(详细的使用方式请参考产品包中的
为了简化用户使用代码搭建3D场景的复杂度,TWaver还提供了一个可视化的编辑工具,用于帮助用户编辑3D场景,然后将场景转换为可读的xml文件。需要再现场景的时候,用户只需要将这份图纸载入系统,实现所见即所得的目的。用户加载完图纸后,就可以根据设计图纸的时候设定的数据绑定关系,实现实时系统监控信息的绑定。

ps:Editor这个工具采用了Flex的module机制,允许用户将预定义的3D模型资源打包成module,然后通过Editor进行动态加载到编辑环境中(扩展动态模块的话题我们下章细聊)。

预定义的模型加载进来之后,我们就可以着手设计我们的3D场景了。Editor目前采用的是2D方式编辑,3D场景展现的方式。例如我们现在建立一个小房间,房间内设置一个机柜。

我们将其另存成名为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>

有了这份图纸我们就可以在监控系统载入的时候,将图纸载入系统,直接呈现3D场景了。

[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:由于我们的模型中,用来渲染机柜的图片定义成了XZRack3D1,所以我们在上面的代码里需要把资源注册进来。
载入图纸之后,我们就可以看到一个在Editor中设计完成的场景了。

话题引申开,毕竟仅仅加载一个3D场景还不是我们的目的,我们还会希望能够把我们的监控信息追加到3D场景上,实现我们监控系统的3D化。那么这个时候,我们前面提到的Business ID就起到作用了。

//注册数据类型,用来解读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);

那么我们就可以直接读取映射在图纸中的业务id属性,用来满足用户动态绑定数据

这样我们就完成了应用程序加载预设计的图纸,并实现数据绑定的功能了。ok,动动手指就可以把你的2D变3D,赶紧来试一下吧。

后续文章
如何自定义模型module
图纸的二次编辑。




http://www.niftyadmin.cn/n/1765885.html

相关文章

基于Visual C++2013拆解世界五百强面试题--题4-double转换成字符串

请用C语言实现将double类型数据转换成字符串&#xff0c;再转换成double类型的数据、int类型的数据想要完成题目中的功能&#xff0c;首先我们的先对系统存储double的格式有所了解。浮点数编码转换使用的是IEEE的编码标准。类型存储位数​​​偏置值​​数符(S)阶码(E)尾数(M)总…

Closed Fences USACO 3.4(阵亡)

描述 一个闭合的栅栏是平面上的一些不相交的首尾相连的线段形成的多边形&#xff0c;有N个角(顶点) (3 < N < 200)。 顶点不重合&#xff0c;它以逆时针方式以数组{xi, yi}给出(i1,2,...,N)。 每一对相邻的顶点都是一条栅栏。因此共有N条栅栏 (定义xN1x1, yN1y1)。 这里有…

?? 运算符

?? 运算符定义在将可以为 null 的类型分配给非可以为 null 的类型时返回的默认值。 int? c null;// d c, unless c is null, in which case d -1. int d c ?? -1; 此运算符还可用于多个可以为 null 的类型。例如&#xff1a; int? e null; int? f null;// g e or…

HTML5 WebSocket 技术介绍

WebSocket是html5规范新引入的功能&#xff0c;用于解决浏览器与后台服务器双向通讯的问题&#xff0c;使用WebSocket技术&#xff0c;后台可以随时向前端推送消息&#xff0c;以保证前后台状态统一&#xff0c;在传统的无状态HTTP协议中&#xff0c;这是“无法做到”的。 传统…

软件开发启示录--迟到的领悟(转)

原地址&#xff1a;http://www.cocoachina.com/gamedev/misc/2013/1018/7196.html我的软件开发生涯开始于15年前。但是直到最近的5年&#xff0c;我才真正开始看到自己在软件开发领域的巨大进步。这里有一些感悟是我希望能够在我进入软件开发领域时所知道的事情&#xff0c;如果…

TWaver HTML5 高性能拓扑

TWaver HTML5临近发布,通用组件Tree、Table效率都非常高,都可以承载万以上级别的数据,但是使用Element拼装方式的拓扑图在数据量上还有所欠缺&#xff0c;只能达到千级别&#xff0c;为了解决用户的大数据量需求,近期最大的惊喜是添加了一个高性能的拓扑实现, 看看下面的测试就…

自定义告警染色

在TWaver中&#xff0c;拓扑上的告警呈现的方式是多种多样的&#xff0c;最常见、最通用的是在原来的图片上叠加上告警级别所对应的颜色&#xff0c;这种方式在TWaver的各个分支版本中都是支持的&#xff0c;呈现效果如下图所示&#xff1a; 另外还有两种是将告警颜色添加在网元…

mysql Alter table设置default的问题,是bug么?

不用不知道&#xff0c;用了没用&#xff1f; 昨天在线上创建了一个表&#xff0c;其中有两个列是timestamp类型的&#xff0c;创建语句假设是这样的&#xff1a; create table timetest(id int, createtime timestamp,updatetime timestamp); 但是在创建完成之后&#xff0c;显…