`

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

阅读更多

 

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

现在就让我给大家详细的介绍一下如何使用Editor工具设计3D场景,如何绑定实时数据。
第一步当然是打开Editor,加载预定义的3D模型,初始化设计环境。

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

点击上图的“确定”按钮后,Editor就会在同根目录下寻找相关module。根据Flex的设计,这些module都被打包成为swf文件,如果用户使用HTTP服务器发布起Editor的话,需要把这些module的swf文件放在Editor.swf 的同根目录下。
加载成功后,在模块中预定义的模型就会呈现在Eidtor左侧的资源栏中。

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

在编辑的时候,需要强调的一点是这个里面的BID属性,在Editor工具中,对于可以将来用于监控的对象设定了一个Business ID属性,就是用来与客户自己系统模型中具体设备的ID相关联用的,这个属性被存在了TWaver的ClientProperty里(本文后面会介绍此处的用法)。
我们从视图上如果看到场景设计达到目标了,就可以将场景存为xml文件,以备监控程序加载使用。

我们将其另存成名为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;
图纸的二次编辑。

分享到:
评论
1 楼 xiaosi1278 2012-11-20  
你好能不能把你
讲的源代码发一下!!做参考403541110@qq.com

相关推荐

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织结构等场景。5.9.0是该库的一个特定版本,可能包含了新功能、性能优化或错误修复。 描述简单明了,"twaver-html5-5.9.0-api"直接...

    TWaver的3d图形组件库,小demo

    8. **数据绑定**:TWaver可以将数据源与3D图形元素绑定,实时更新图形,以反映数据的变化,这对于数据分析和决策支持至关重要。 9. **跨平台**:基于HTML5的TWaver 3D组件可以在各种设备和操作系统上运行,包括桌面...

    基于TWaver实现的3D机房Demo

    TWaver是一款强大的WebGL3D框架,它为开发者提供了一个高效、灵活的工具,用于创建交互式的3D应用程序,特别是针对网络拓扑和机房管理等场景。本文将深入探讨如何利用TWaver实现3D机房的演示项目。 首先,TWaver的...

    TWaver 3D Flex 3D 实例 例子

    从标签“Flex 3D 实例 例子”中我们可以推测,内容将专注于编程实践,包括3D场景的创建、3D对象的操纵、用户交互以及可能的数据绑定等。 根据压缩包内的文件名称列表,我们有以下组件: 1. **License.txt**:通常...

    TWaver HTML5 开发指南代码

    2. **数据绑定**:将图形与数据源绑定,实现数据驱动的动态更新。 3. **交互性**:支持拖放、点击、选中、高亮等多种用户交互方式。 4. **动画效果**:提供丰富的动画效果,如淡入淡出、平滑移动等,增强用户体验。 ...

    twaver 3D机房接口文档

    ### 3D机房系统接口文档关键知识点 ...通过以上介绍可以看出,《twaver 3D机房接口文档》详细描述了3D机房系统的关键功能模块及其接口设计,旨在帮助开发者更好地理解并利用这些接口来实现机房管理自动化和智能化。

    TWaver-Java-3.7-Developer-Guide.rar_twaver_twaver java_电信网管_网管 j

    《TWaver Java 3.7 开发者指南》是一份专为Java开发者设计的电信网管图形界面组件的详细教程。TWaver是一款强大的可视化工具,主要用于构建复杂的网络管理系统,尤其在电信领域应用广泛。该教程涵盖了如何利用TWaver...

    twaver-java-3.7

    4. **数据绑定**:Twaver支持与各种数据源(如数据库、CSV文件)进行绑定,动态更新图表内容,实时反映数据变化。 5. **高性能渲染**:优化的图形渲染引擎确保在大规模数据量下仍能保持流畅的性能。 **三、新功能...

    twaver-flex-3.6.5 官方demo

    【标题】"twaver-flex-3.6.5 官方demo" 提供的是一个基于Flex技术的Twaver图形库的演示版本。Twaver是一款强大的数据可视化和建模工具,广泛应用于网络、系统和业务流程的图形化表示。在3.6.5这个版本中,官方提供了...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    总结起来,"TWaver-java-4.1最新 官网试用版jar包及Demo"是一个专注于图形可视化的Java工具包,提供了丰富的图表类型和交互功能,适合数据驱动的应用场景。开发者可以通过试用版jar包和Demo快速上手,结合源码、文档...

    twaver.js使用示例

    Twaver作为一个图形化工具,它提供了丰富的图形元素、交互操作以及数据绑定功能,使得开发者可以快速构建具有视觉吸引力且功能丰富的应用。 **压缩包子文件的文件名称列表:** 只有一个文件名“alarm”,我们可以...

    TWaver-java-4.1试用版jar包

    【标题】"TWaver-java-4.1试用版jar包" 涉及的核心知识点是TWaver,这是一个专门用于数据可视化和图表绘制的Java库。TWaver提供了一个全面的解决方案,帮助开发者创建复杂的图表、仪表盘以及交互式的数据可视化应用...

    twaverflex 3D开发文档

    通过上述内容,可以了解TWaver3D for Flex开发文档为开发者提供了一个全面的指导,涵盖从基础的3D图形概念到具体的API使用方法,还包括模型文件导入和交互功能的设计,旨在帮助开发者构建出具有吸引力的3D应用程序。...

    twaver-java-4.1

    【标题】"TWaver-java-4.1" 是一个针对Java平台的TWaver最新开发包,旨在帮助开发者创建更加生动且具有吸引力的用户界面。TWaver是一个强大的数据可视化工具,它提供了丰富的图表类型和交互功能,让数据展示更加直观...

    Twaver-html5.zip

    Twaver学习案例的例子

    TWAVER-最好的JAVA 图形设计组件-试用

    TWAVER是一款强大的JAVA图形设计组件,专为电信级别的应用设计,它提供了丰富的功能来满足开发者在图形化展示、操作和地理信息系统(GIS)等方面的需求。这款组件的强大之处在于其高度定制性和灵活性,使得开发人员...

    TWaver Java 开发课程3 - TDataBox的使用

    TWaver Java 开发课程3 - TDataBox的使用,好好学习!

    TWaver for HTML5

    TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和...

Global site tag (gtag.js) - Google Analytics