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

Easter79
• 阅读 557

TWaver提供了一套3D场景的开发包,用来帮助用户快速搭建3D场景,实现3D的监控系统。这个开发包目前商推的只有Flex框架下的版本,被称为TWaver3D for Flex。开发包提供简单的API,用户向TWaver的数据对象(例如Node)中设定相关的3D style,就可以构建出一套3D场景。(详细的使用方式请参考产品包中的
为了简化用户使用代码搭建3D场景的复杂度,TWaver还提供了一个可视化的编辑工具,用于帮助用户编辑3D场景,然后将场景转换为可读的xml文件。需要再现场景的时候,用户只需要将这份图纸载入系统,实现所见即所得的目的。用户加载完图纸后,就可以根据设计图纸的时候设定的数据绑定关系,实现实时系统监控信息的绑定。
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定
现在就让我给大家详细的介绍一下如何使用Editor工具设计3D场景,如何绑定实时数据。
第一步当然是打开Editor,加载预定义的3D模型,初始化设计环境。
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定
ps:Editor这个工具采用了Flex的module机制,允许用户将预定义的3D模型资源打包成module,然后通过Editor进行动态加载到编辑环境中(扩展动态模块的话题我们下章细聊)。
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定
点击上图的“确定”按钮后,Editor就会在同根目录下寻找相关module。根据Flex的设计,这些module都被打包成为swf文件,如果用户使用HTTP服务器发布起Editor的话,需要把这些module的swf文件放在Editor.swf 的同根目录下。
加载成功后,在模块中预定义的模型就会呈现在Eidtor左侧的资源栏中。
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定
预定义的模型加载进来之后,我们就可以着手设计我们的3D场景了。Editor目前采用的是2D方式编辑,3D场景展现的方式。例如我们现在建立一个小房间,房间内设置一个机柜。
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定
在编辑的时候,需要强调的一点是这个里面的BID属性,在Editor工具中,对于可以将来用于监控的对象设定了一个Business ID属性,就是用来与客户自己系统模型中具体设备的ID相关联用的,这个属性被存在了TWaver的ClientProperty里(本文后面会介绍此处的用法)。
我们从视图上如果看到场景设计达到目标了,就可以将场景存为xml文件,以备监控程序加载使用。
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定
我们将其另存成名为common.xml的图纸。
图纸片段如下


    
    XZRack3D1
    map6
    
     true
    XZ1
    custom1

有了这份图纸我们就可以在监控系统载入的时候,将图纸载入系统,直接呈现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中设计完成的场景了。
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定
话题引申开,毕竟仅仅加载一个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属性,用来满足用户动态绑定数据
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定
这样我们就完成了应用程序加载预设计的图纸,并实现数据绑定的功能了。ok,动动手指就可以把你的2D变3D,赶紧来试一下吧。

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
5G“乍到”,图扑带你了解室内定位可视化的实现与新突破
前言现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的可视化监控领域,一般都是基于WebSCADA的前端技术来实现2D可视化监控,本系统采用Hightopo的HTforWeb产品来构造轻量化的3D可视化场景,该3D场景从正面展示了一个现代化工厂的现实场景,室内定
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k