快速上手
MONO Design编辑器基于WebGL技术,无需插件支持,即可在浏览器上实现3D场景的构建和展示。通过MONO Design编辑器,用户可以自由编辑和组合3D对象来模拟实体业务对象,并结合场景、灯光等环境实现整体场景的实时渲染。同时,其提供支持jsdoc(html格式)的帮助文档。
使用MONO Design编辑器,您可以在最短时间内绘制出您想要的设备和房间。
启用mono包,同时兼容TGL包。
打开MONO Design编辑器,您将看到如下界面。您可以选择开始设计一个新的房间(Room),或者一个新的组件(Component)。
房间(Room)使用“2D编辑,3D展示”的设计方式。用于房间编辑的对象包括:“地板”(Floor),“墙体”(Room),“窗”(Window),“门”(Door)“窗洞”(Cutoff)和“材料”(Floor/Wall)等。
Mono将所有非环境对象称之为“组件”。 一个“组件”通常由一个或几个基本几何图形构成模型对象,并通过材质、颜色、贴图来增强模型对象的逼真渲染。“组件”可在3D下拖放编辑,并提供多种视图。
房间编辑完成后,可以摆放由组件构成的设备对象,最后生成3D场景。
MONO Design编辑器v1.2版本增加了2D编辑房间时的视图标尺,可对房间的定位数值一目了然。
在版本v1.9中,MONO Design增加了一个新功能,提供导入单个模板的API接口:loadTemplate。
一、机房编辑器
1. 基本操作和按钮
搭建房间主要是通过拖放对象到画布来实现的。拖放到画布上的对象,可以继续拖拽来设置它的尺寸,也可以双击对象,进入详细属性设置界面。
对象拖放
选中左侧列表里的基本对象后,用鼠标拖放至画布即可。
同时,可实现shapenode删除点的功能。需按住Alt键,鼠标点击确定要删除的点后,出现对话框,点击Ok,确定删除。如下图:
在mono v1.6.5版本中,更改了鼠标样式。同时,鼠标移至两点之间,光标将变身成加号,添加一个节点。而当删除节点时,光标将变成一减号。
比例尺功能
比如:100PX=1m,指100个像素表示1m长度。画布上尺寸单位为:像素。
全方位旋转
在编辑器设置中选中全方位旋转选项,便可实现对3D房间全方位旋转展示。
属性设置
对象拖放至画布后,双击对象可以设置其详细属性。
2D/3D切换
房间使用2D编辑,3D展示的方式,用户可以点击“3D”按钮切换至3D视图查看对象。
在3D界面增加了一些常用工具条。如下图:
其中,最右边按钮是对象的对齐显示按钮的快捷键。
保存
点击“保存”按钮,可将当前的场景保存为图纸。
保存后的图纸,可在“Templates”的“Room”类目下查看。
无论是在2D或者3D场景下,都可以保存房间的图纸,保存时,系统会按当前视角捕捉房间的图片作为图纸的图标。
输入图纸的名称后,点击“OK”保存,保存后的图纸,可在“Templates”的“Room”类目下查看。
删除
选中一个对象后,点击“delete”键来删除该对象。
清除
点击“CLEAR”按钮,清除画布上的全部对象。确认清除前,会有弹窗消息提示。
新建
点击“NEW”按钮,回到主页,可以选择新建一个房间,或者组件。
在新建的下面,导出图纸模板,可以将编辑的对象保存成json文件,并支持json文件导入。实现3D部分文件的共享互用。
在组件和房间的新建标签下,可以将绘制好的文件导出为Flex 3D 文件, 如下图:
在Tools标签项下,我们可以上传DXF文件,作为Network的背景,以做创建模型参考。
Autocad图纸上传后,可直接生成墙体、门和窗体,如下图:
2D room
编辑器设置-云存储
MONO Design提供了云存储功能。其帮助用户将创建完毕的模板保存到云服务器上。同时, MONO Design为用户提供了一些公用模板,供用户直接使用,公用模板不可删除。点击编辑器设置按钮,进行云存储设置,如下图:
在load resource from 下拉框选择“Cloud”, 同时输入 MONO Design提供给您的Cloud Key。点击“Ok”完成设置,如下图。
设置完毕后,在编辑页面的左侧会显示Public Template,点击可查看详细模板并应用。Template 显示您自创建的模板。自创建模板与公用模板均存储在云服务器上。如下图。
如果不进行云存储设置,自创建模板会存储在本地服务器。
在mono 1.8版本中,其支持将模板拖拽的同时,模板会自动默认放置于地板上。
可以对房间和组件模板进行分类命名,每个类别下的模板数目显示。如下图。
自定义属性
基于软件使用者需求, MONO Design 对房间、地板、窗、门、门洞及其他组件对象提供了属性设置界面,通过自定义属性,使用者在基于 MONO Design二次开发时,可以灵活调用此属性,满足实际开发需求。目前,此属性设置仅供开发者调用。
批量创建机柜
创建机房中的机柜时,可以实现批量创建功能。按住Ctrl键,同时拖拽机柜,会出现一个对话框,设置几行几列以及彼此间的间距大小值,生成所需机柜数目。如下图:
Rows:设置行数
Column:设置列数
X Gap: 横向间距大小
Y Gap:竖向间距大小
侧边栏视图
在新发布的MONO Design v1.9版本中,在组件编辑器和机房编辑器的画布右侧栏上增加了树形侧边栏视图。
在多个组件对象或房间存在时,能够轻松快捷选中组件图像,点击detail下对应的编辑按钮,可以快速设置其属性,并明确各对象间的父子关系。图标为眼睛的按钮,点击可以显示或隐藏相应的编辑对象,使编辑画面及过程更流畅清晰。如下图所示。
与组件编辑器不同的是,在机房编辑器界面,在侧边栏视图下方,新版本还增加了鹰眼视图模式。在房间溢出整个编辑绘图框时,通过鹰眼视图,可以上下左右移动白色框,查看房间的具体细节。如下图。
日志查询
如许多软件提供日志查询功能一样,MONO Design v1.9版本中新增了日志查询的功能。在在点击新建的页面出现后,右下角出现系统日志的说明。点击可以查看,但必须有权限的系统用户方能使用。
窗口缩放
新版中中增加了在MONO Design编辑器中增加了窗口左右缩放和上下缩放功能,给编辑器中的视图绘制提供更多灵活空间。如下图所示。
2. 地板
TWaver MONO Design支持固定形状和自由形状的地板编辑。
绘制地板
如果您需要绘制较为规则的地板形状,例如方形、L形地板区域等,可直接将已有的地板对象图标拖放至画布。如下图所示,拖放“Square Floor”至画布,绘制方形地板区域,拖放斜凸形地板至画布,绘制相应地板区域。
地板形状拖放至画布后,任意选中一个地板形状后,可以继续通过拖拽该形状的顶点来改变其形状和大小。其中,拖放“圆形顶点”可改变地板区域的形状,拖放“直角形”来改变形状的长宽比例。
除了固定形状的地板区域外, MONO Design还支持绘制任意形状的地板区域,满足不同的应用需求。 如需开始绘制任意形状的地板区域,只需将“Draw Floor”按钮拖放至画布,此时鼠标状态自动切换为“绘图”模式,您可以开始在画布上绘制您需要的地板形状。
绘制任意形状地板的步骤如下:
1. 单击鼠标确定形状顶点
2. 拖放绘制直线
3. 单击鼠标确定第二个顶点,以此类推
4. 绘制结束后,双击鼠标确定形状终点
注:拖拽时,按住Ctrl键可以绘制水平或者垂直方向的直线。
确定终点后,终点和起点自动连线,构成封闭区域。
选中地板后,可以调节其形状和大小。
地板材质
地板区域确定后,您可以继续编辑地板的材质。 MONO Design提供了多种地板材质可供选择。从界面左侧拖放一种地板材质到地板区域来改变地板材质。
地板属性
双击地板区域,可以设置地板的属性,地板的形状和大小可通过拖拽调节,此处设置坐标主要用于平移形状。
Location X:地板左上角顶点在X轴上的坐标
Location Y:地板左上角顶点在Y轴上的坐标
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Image:地板贴图路径
Repeat:地板贴图重复次数
Deep:地板厚度设置
在MONO Design v1.9中,在地板的属性设置框中增加了点设置的功能,进一步提高地板不规则形状设置的便利性。如下图所示:
3D视图
地板的编辑工作都是在2D界面完成的,在编辑过程中,您可以随时切换至3D模式进行查看。点击“3D”按钮,即可将当前2D视图切换为3D视图。
3D视图仅供查看,您可以进行全方位旋转、缩放等操作,但不会改变对象的任何值。
如要回到2D编辑界面,再次点击“2D”按钮即可。
3. 房间(墙体)
房间(Room),是由不同的墙体构成的,因此,房间的绘制和编辑也可以认为是墙体的绘制与编辑。您可以快速绘制固定形状的房间,也可以绘制自由形状的房间,并可在房间中放置内墙。
在 MONO Design v1.2版本中,对墙体建模进行改进,去掉墙体中的柱子对象,无需考虑墙体中拐角处的对接问题。
绘制房间
如果您需要绘制较为规则的房间形状,例如方形房间、L形房间等,可直接将已有的房间对象图标拖放至画布。如下图所示,拖放“Square Room”至画布,绘制方形房间,拖放“L-Shape Room”至画布,绘制L形房间。此外,为了便于快速绘制,我们还提供了带有地板材质的方形,L型房间和凸形房间等。
房间形状拖放至画布后,可任意选中一个房间形状,继续通过拖拽该形状的顶点来改变其形状和大小。其中,拖放“圆形顶点”可改变房间的形状,拖放“直角形”改变其的长宽比例,拖放某一条边也可改变房间的形状。
除了固定形状的房间外,您也可以绘制任意形状的房间,满足不同的应用需求。如需开始绘制任意形状的房间,只需将“Draw Room”图标按钮拖放至画布,此时鼠标状态自动切换为“绘图”模式,您可以开始在画布上绘制您需要的房间形状。
如前文所述,绘制房间形状,即绘制房间各个面的墙体。在绘制过程中,您可以随时切换至3D视图进行查看。
1. 单击鼠标确定形状顶点
2. 拖放绘制直线
3. 单击鼠标确定第二个顶点,以此类推
4. 绘制结束后,双击鼠标确定形状终点。
注:拖拽时,按住Ctrl键可以绘制水平或者垂直方向的直线。
选中房间后,可以调节其形状和大小。
MONO Design v1.3版本增加了房间自动吸附到网格上的功能。即在绘制房间的过程中,根据设置的吸附尺寸,自动吸附到最合适的网格位置。吸附尺寸大小,在编辑器设置中进行设置。
按住S键,同时拖动鼠标,将显示房间在网格中的吸附位置,如下图绿色圆点:
这里编辑器设置中设定的吸附尺寸为100单位,比如,原来房间一点坐标为(455,75),以100的单位自动吸附在网格的坐标为:(500,100);
房间内墙
如需在房间内绘制内墙,可以将“Interior Wall”图标按钮拖放至画布,此时鼠标状态自动切换为“绘图”模式,您可以开始在画布上绘制您需要的内墙。内墙用较细的线条表示,默认不闭合。
绘制过程为:
1. 单击鼠标确定形状顶点
2. 拖放绘制直线
3. 单击鼠标确定第二个顶点,以此类推
4. 绘制结束后,双击鼠标确定形状终点。
内墙默认为不闭合,绘制完成后,您可以选择内墙,调节其形状和大小。
在MONO Design v1.3版本中,在绘图板上绘制墙体完毕后,可直接拖地板吸附到墙体,快速创建一个房间,无需再手动调墙体与地板的对接。
房间属性
双击任意外墙、内墙,可以调出房间属性,如下图所示:
Location X:房间左上角顶点在X轴上的坐标
Location Y:房间左上角顶点在Y轴上的坐标
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Height:墙体的高度
Deep:墙体的厚度
Closed Room:是否绘制闭合房间。
Pole Texture Image:房间柱子的贴图路径
Pole Segments:柱子面数,面数越多,柱子越趋近于圆柱。
Use Textured Wall:墙面是否采用纹理贴图。
Frame Image:窗框贴图
Inner Image:墙体内侧贴图路径
Outer Image:墙体外侧贴图路径
墙体材质
与地板相似,房间形状确定后,您可以继续编辑墙体的材质。 MONO Design提供了多种墙体材质可供选择,将界面左侧“Wall”下的材质拖放至墙体即可。
墙体按贴图的位置,可分为外侧(External)、内侧(Internal、框架(Frame)三个部分。
注意:对于外墙来说,其外侧为external face, 内侧为Internal face;对于内墙来说,其两侧均为Internal face。
墙体材质分为纹理材质和非纹理材质。
将非纹理材质贴图应用于墙体表面时,可分别设置墙体外侧、内侧和框架的贴图。
将纹理材质贴图应用于墙体表面时,可设置内侧和外侧的贴图:
另外,当把材质拖放至墙体内部区域时,表示对该区域的房间或内墙材质作出更改;(Change Room Material)
当把材质拖放至墙体外部区域时,则表示对所有区域的墙体材质作出更改。(Change All Room Material)
3D视图
搭建好的房间,可点击“3D”按钮查看。
4. 窗/门/窗洞/管线
构建完地板、房间后,您可以使用TWaver 3D来绘制房间所需的门、窗体以及管线。在v1.8版本中,支持门窗贴图修改。
窗
在画布左侧栏的“Window”类目下,我们提供了多种材质的窗体。将所需的窗体拖放至墙上,即可在墙上绘制窗体。
窗体的长度和位置可以直接在画布上拖拽调节:
双击窗体,可设置其他属性:
Full Width:勾选,将窗体设为与墙体等宽
Height:窗体高度
Length:窗体宽度
Specular Strength:设置窗的光照强度
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Vertical Position: 窗体的离地高度
Animation:下拉菜单选择演示动画,支持270度旋转动画
Picture:选择后面搜索按钮,修改们的材质或贴图。
Horizontal Flip:水平翻转,选中之后,门会自动进行翻转。
点击“3D”按钮,可查看墙体和窗的3D效果,Shift+双击窗体,可以查看动画效果。
门
在画布左侧栏的“Door”类目下,拖拽门至任一墙体,可在墙体上绘制门。
门的长度和位置可以直接在画布上拖拽调节,双击门,可设置其他属性:
Full Width:勾选,将门设为与墙体等宽
Height:门的高度
Length:门的宽度
Specular Strength:门的光照强度
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Animation:下拉菜单选择演示动画,支持270度旋转动画。
Picture:选择后面搜索按钮,修改们的材质或贴图。
Horizontal Flip:水平翻转,选中之后,门会自动进行翻转。
点击“3D”按钮,可查看墙体和门的3D效果,Shift+双击门,可以查看动画效果。
窗洞
除了门和窗,您还可以在墙体上实现没有材质的窗洞效果,将“Cutoff”拖拽至墙体即可。
窗洞的长度和位置可以直接在画布上拖拽调节,双击窗洞,可设置其他属性:
Full Width:窗洞是否适应整面墙的宽度
Height:窗洞的高度尺寸
Specular Strength:设置窗洞的光照强度
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Position Y:窗洞的离地高度
点击“3D”按钮,可查看门和窗户的3D效果,Shift+双击门或窗,可以查看动画效果。
管线
在画布左侧的“Pipe”类目下,用户可鼠标拖拽相应的管线到画布,点击定位,拖拽,点击定位,以此类推,创建管线。管线分两类,一是拐弯位置为棱角的管线,标识为红色;二是拐弯位置为弧形的管线,标识为绿色。两种管线绘制方法相同。 如下图:
Image:管线的存储路径
Radius:管线的半径
Position Y: 管线的离地高度
Path Segments: 路径切分距离长度
Start cap: none表示管线接头无盖,非封闭管线。
End cap: none表示管线尾端无盖,非封闭管线。
Start cap size: 管线头端直径。
End cap size: 管线尾端直径。
Repeat row: 行重复次数
Repeat Column: 纵深重复次数
绘制步骤:
1. 鼠标拖拽相应类型管线到画布,
2. 鼠标点击定位有点,拖拽绘制直线,点击定位点,以此类推,鼠标定位终点。
3. 双击后管线创建完毕。
4. 双击管线,可以设置管线的相应属性参数。
点击3D按钮,切换为3D视图,拐弯处为棱角管线。拐弯处为弧线的管线。如下图:
在v1.2版本中,使用者可对房间的管线进一步可视化编辑,设置管线的离地高度等。如下图:
5. Billboard
Billboard类目下提供了一些常见的物品,如空调、灭火器、盆栽等,可直接拖放至画布。Billboard物品的离地高度为0,选中物品,可调节其在房间里的位置,通过鼠标滚轮调节物品大小。
MONO Design除了绘制简单的单层房间外,还可以建立多个楼层,每层上可分别绘制房间。每个楼层的高度,是否可见,都可单独设置。
二、创建多楼层机房
1. 新建楼层
打开房间编辑界面,默认的楼层为1楼(1st Floor)。
点击下拉菜单,点击“Add New”,建立一个新楼层。
新楼层的属性设置如下:
Floor Name:自定义的楼层名称
Floor Height:楼层的离地高度,设置时需要考虑到楼层高度和墙高的关系。
Clone:勾选此项,并从“Clone Floor”里选择一个已有楼层,则新建的楼层会拷贝“Clone Floor”楼层里的全部对象。
多个楼层添加后,可通过下拉菜单里的楼层管理(Floor Management)来统一设置楼层的属性:
Name: 楼层的名称,添加楼层时定义,可以随时修改
Height:楼层的离地高度
Ref: 参考楼层,被设置为ref的参考楼层的内容将会始终显示在画布上,作为其他楼层的绘制参考。
Action: 选中楼层,点击“↑”将该楼层在管理表格中向上移一层。点击“↓”将楼层向下移一层。箭头只改变楼层名称在表格中的排序,以及在添加楼层下拉菜单中的排序,不会改变楼层本身层数和高度。点击“X”将会删除该楼层的所有数据。
2. 3D视图
三、使用设备编辑器
MONO Design将所有非环境对象称之为“组件”。 一个“组件”通常由一个或几个基本几何图形构成模型对象,并通过材质、颜色、贴图来增强模型对象的逼真渲染。例如,用一个长方体表示一个交换机,用一个圆柱体表示房间内的一根柱子等。“组件”可在3D下多视图拖放编辑。
启动 MONO Design编辑器后,选择“Start a new Component”进入组件编辑页面,如下图所示。
目前 MONO Design加载的对象速度为加载1万圆柱体仅耗时3-4秒。MONO Design v1.3版本进一步提高加载对象的速度,首次加载对象效率提高了50%。同时在1.8版本中,增加了比例尺功能。
同时可以直接导出为Flex 3D模式,供Flex 3D开发用户参考。
1. 组件编辑界面
组件的编辑界面主要由“组件对象”,“画布”和“菜单栏”构成。
组件对象
组件编辑界面左侧为可选择的编辑对象,包括“原型对象”(Primitives),“材质”(Materials),“告示”(Billboards),“染色”(Dye Colors),“机柜贴图”(Chassises),“板卡贴图”(Card Panels),“横向板卡”(Horizontal Cards),“纵向板卡”(Vertical Cards),“端口贴图”(Ports)等。
画布和视图
主要的编辑工作在编辑界面主体区域完成,我们称之为“画布”(Canvas)。与房间的画布不同,组件编辑采用“3D编辑,实时展示”的方式,提供了“右视图”,“前视图”,“顶视图”和“透视图”四种视图。可以看到,MONO Design v1.4版本中,画布是非透明的黄色网格风格。
在mono v1.6.5版本中,画布上增加了2D的编辑画布及保存模板功能,之前四个3D编辑视面板块合并至其他三个板块,并在相应的板块中可以自由切换3D视图展示。如下图。
同时,点击组件的对象,我们可以看到部分属性设置增加了下拉列表设置。
拖拽一个Cube到画布,我们可以看到,如上图标识。
圈1和圈2表示 点击任意按钮,切换3D对象视图编辑模式。
圈3 表示:cube对象的2D编辑画布。
圈4 表示:在此画布可360度查看3D编辑对象。
接下来,我们演示如何对3D对象在2D编辑画布上进行更细致的编辑。
按住Alt键,选定要编辑的3D对象的一面,双击鼠标,这一面将会在2D编辑画布上显示出来。此操作可用于机柜详细创建板卡,端口或类似要对详细一面的编辑上。在此,我们以为一机柜添加板卡和端口为例演示。如下图。
点击OK后,看板卡已放置在机柜中,如下列图示,为板卡添加相应的批量添加端口,也可单拖拽端口到板卡放置。
点击OK后,端口会自动排列在板卡上。如下图:
这样一个机柜及相应的板卡和端口号便通过的2D的界面编辑完毕。
此外,在MONO Design 1.7版本中,可在此网页首图中看到,在Components3D编辑页面中,显示编辑对象及其面的数量。在Components 2D上增加了快速复制的功能。
同时,在2D编辑画布上实现对象贴图在其2D和3D模式下的同步更新实现。3D对象贴图未加载上时,系统默认被编辑对象面上显示设置一张有TWaver标识的贴图。
Components 3D 编辑互动功能。在之前的版本中,可以对编辑的组件对象进行360度旋转,在此通过简单的按钮可做快速的查看,缩小与放大。如下图:
圈3 表示 移动(move),通过鼠标点击图中箭头指的红色、绿色或蓝色箭头,实现3D编辑对象的左右上下前后的移动,如下图
圈4 表示 旋转(Rotate),通过鼠标点击图中箭头指的红色、绿色或蓝色半环,实现3D编辑对象的左右上下前后的旋转。如下图:
圈5 表示 拉伸(Scale),通过鼠标点击图中箭头指的红色、绿色或蓝色细锥,实现3D编辑对象的左右上下前后的尺寸拉伸。如下图:
圈2 表示移动,旋转以及拉伸的功能同时显示在编辑对象上。如下图:
圈1,点击其箭头,上面显示的任意功能即撤销。
在mono 1.8版本中,在绘图页面,增加了对象之间连接的功能,主要用于房间内、机房内线路的表示。如下图Link图标示。
在画布任意拖拽两个对象,全部选中,点击Link图标,会出现一个对话框,选择link的特点,包括,link 风格,linK Size等,如下图:
Link Style: 连线的风格,通过下拉框选择。
Link Color: 连线的颜色,可以填写相应颜色,必须用英文。
Link Size: 连线的尺寸。
Link Extend: 连线延伸
导入功能
MONO Design 编辑器左上方,提供了文件导入功能,支持OBJ文件的导入, 同时支持保存在本地文件obj的导入。
导入CAD图纸的功能,可以直接通过CAD图生成墙体、门和窗体?
菜单栏
从左到右依次为:
平移:单击启用按钮后,可拖拽视图内的3D物体沿着X,Y,Z轴进行水平移动。
旋转:单击启用按钮后,可拖拽视图内的3D物体绕着X,Y,Z轴向旋转。
缩放:单击启用按钮后,可通过拖拽视图内的3D物体,改变其长宽高尺寸。
逆时针旋转90°:将当前选中对象绕轴逆时针旋转
顺时针旋转90°:将当前选中对象绕轴顺时针旋转
NEW:新建一个房间或组件,系统会提示是否保存当前画布
CLEAR:清除画布上的所有对象
2. 原型对象
MONO Design使用原型对象来组建3D模型,主要原型对象包括Cube(立方体),Sphere(球体),Cylinder(圆锥)、Torus(圆环)和Pipe(管线)五种。
双击建好的对象,会跳出对话框,选择动画一项,可以进行丰富的动画效果设置。如下图:
Action:通过下拉框,选择是旋转还是平移。
Anchor/Direction:通过下拉框,选择旋转或平移的方向。
Value:选择旋转或平移的值。
通常来说,原型对象的属性主要包括以下几种。
主对象:原型对象的OID属性,设置为“main”表示将该原型对象设置为主对象。几个原型对象进行拼装后,可以用于表现更加复杂的业务对象,我们称之为拼装对象。拼装时,需指定其中的一个对象为主对象,以该主对象中心为相对原点,来描述其他对象相对于该原点的位置、旋转角度和以及相对于自身的缩放比例等。
动画效果:您可以为每个原型对象设置动画效果,在进行3D演示时,通过快捷方式可以调出这些动画效果。
位置:在编辑器中,可以通过拖拽来改变原型对象的位置,也可以通过设置原型对象中心在X,Y,Z轴上的坐标来精确设置原型对象的位置。
尺寸:原型对象的尺寸参数,例如cube对象的尺寸由长宽高决定,sphere对象的尺寸由直径决定等。
材质:原型对象本身的默认材质。
材质贴图:除了原型对象本身的材质外,您可以对其进行贴图,来改变原型的对象的外观。
材质贴图方式:可自定义贴图水平和纵向的重复次数。
材质贴图是否允许半透明:允许材质贴图半透明后,可以为原型对象设置半透明贴图。
材质透明度:0-1,0为全透明,1为不透明。
Cube对象及其属性
立方体、或者长方体对象,统称为Cube对象。Cube对象的形状可以通过设置其长、宽、高来决定。
OID:填写“main”,则将该对象设置为主对象,否则留空。
Animation:下拉菜单选择3D演示动画效果
Position X:对象中心在X轴向上的坐标
Position Y:对象中心在Y轴向上的坐标
Position Z:对象中心在Z轴向上的坐标
Texture Picture:材质贴图路径
Texture Row Repeat:材质贴图横向重复次数
Texture column repeat:材质贴图纵向重复次数
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Sphere对象及其属性
OID:填写“main”,则将该对象设置为主对象,否则留空。
Animation:下拉菜单选择3D演示动画效果
Position X:对象中心在X轴向上的坐标
Position Y:对象中心在Y轴向上的坐标
Position Z:对象中心在Z轴向上的坐标
Texture Picture:材质贴图路径
Texture Row Repeat:材质贴图横向重复次数
Texture column repeat:材质贴图纵向重复次数
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Sphere Radius:球体的直径
Width Segments:横向分段数
Height Segments:纵向分段数
Cylinder对象及其属性
Cylinder对象可以用于表现一个圆柱,圆锥,棱柱,棱锥等。例如,将Cylinder上表面直径设为0,表面分段数设为4,即可生成一个四棱锥。
OID:填写“main”,则将该对象设置为主对象,否则留空。
Animation:下拉菜单选择3D演示动画效果
Position X:对象中心在X轴向上的坐标
Position Y:对象中心在Y轴向上的坐标
Position Z:对象中心在Z轴向上的坐标
Texture Picture:材质贴图路径
Texture Row Repeat:材质贴图横向重复次数
Texture column repeat:材质贴图纵向重复次数
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Height: 对象的高度
Top Radius: 对象上表面直径,为“0”即显示为圆锥。
Bottom Radius: 对象下表面直径
Radial Segments: 分段数,段数越多,则圆锥表面越平滑。
Opened Top: 对象上表面是否显示为开口
Opened Bottom: 对象下表面是否显示为开口
Torus对象及其属性
OID:填写“main”,则将该对象设置为主对象,否则留空。
Animation:下拉菜单选择3D演示动画效果
Position X:对象中心在X轴向上的坐标
Position Y:对象中心在Y轴向上的坐标
Position Z:对象中心在Z轴向上的坐标
Texture Picture:材质贴图路径
Texture Row Repeat:贴图横向重复次数
Texture column repeat:贴图纵向重复次数
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Radius:圆环的直径
Tube:圆管的直径
Radial Segments:圆环体的分段数
Tubular Segments:圆管体的分段数
Arc:圆环的角度,360为闭合圆环。
Pipe对象及其属性
MONO Design增加了多个类型的Pipe对象,用于部署管线,表现更丰富的业务对象。如下图:
Pipe 属性参数如下:
OID:填写“main”,则将该对象设置为主对象,否则留空。
Animation:下拉菜单选择3D演示动画效果
Position X:对象中心在X轴向上的坐标
Position Y:对象中心在Y轴向上的坐标
Position Z:对象中心在Z轴向上的坐标
Texture Picture:材质贴图路径
Texture Row Repeat:贴图横向重复次数
Texture column repeat:贴图纵向重复次数
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Radius:圆环的直径
Path: 管线切分的路径
Path Segments: 管线切分的路径长度
Shape segments: 管线切分的形长度
Start cap: none表示管线接头无盖,非封闭管线。
End cap: none表示管线尾端无盖,非封闭管线。
Start cap size: 管线头端直径。
End cap size: 管线尾端直径。
Cap segments: 管线盖切分单位
文字对象及其属性
MONO Design在其v1.2版本中增加了文字对象。
OID:填写“main”,则将该对象设置为主对象,否则留空。
Animation:下拉菜单选择3D演示动画效果
Position X:对象中心在X轴向上的坐标
Position Y:对象中心在Y轴向上的坐标
Position Z:对象中心在Z轴向上的坐标
Texture Picture:材质贴图路径
Texture Row Repeat:贴图横向重复次数
Texture column repeat:贴图纵向重复次数
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Text: 显示的文字内容
Font: 下拉框设置文字字体
Style: 下拉框设置文字风格
Combo对象及其属性
拖拽combo对象到绘制板,会自动显示出3D视图,双击视图,显示其属性设置对话框。
OID:填写“main”,则将该对象设置为主对象,否则留空。
Animation:下拉菜单选择3D演示动画效果
Position X:对象中心在X轴向上的坐标
Position Y:对象中心在Y轴向上的坐标
Position Z:对象中心在Z轴向上的坐标
Texture Picture:材质贴图路径
Texture Row Repeat:材质贴图横向重复次数
Texture column repeat:材质贴图纵向重复次数
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
生成的组合对象可以保存为本地模板,在房间的创建应用中使用,任意拖拽。
双击组合对象,会跳出一个对话框,显示组合体的坐标值,此值不可更改。
Lathe对象及其属性
MONO Design在其v1.3版本中增加了Lathe对象,用于绘制旋转体业务对象。
拖拽Lathe 对象到绘图板上,会出现Lathe的路径绘制图,鼠标拖拽绘制,双击绘图板,结束绘制。如下图:
在编辑器设置中,可设定此3D视图为全方位旋转模式。
双击Lathe 3D视图,显示其属性框:
OID:填写“main”,则将该对象设置为主对象,否则留空。
Animation:下拉菜单选择3D演示动画效果
Position X:对象中心在X轴向上的坐标
Position Y:对象中心在Y轴向上的坐标
Position Z:对象中心在Z轴向上的坐标
Texture Picture:材质贴图路径
Texture Row Repeat:材质贴图横向重复次数
Texture column repeat:材质贴图纵向重复次数
Transparent:是否支持贴图透明
Opacity:材质透明度设置,0-1,0为全透明,1为不透明。
Height Segments:纵向分段数
Radius Segments: 半径分段数
Rotation Angle: 设置旋转角度
Start Closed: 选择首部闭合
End Closed: 选择尾部闭合
3. 其他对象
除了原型对象外,组件界面的其他对象还包括:材质(Materials)、告示(Billboards)、染色(Dye Colors)、机柜贴图(Chassies)、板卡贴图(Card Panels)、横向板卡(Horizontal Cards)、纵向板卡(Vertical Cards)和端口(Ports)。
其中,横向板卡(Horizontal Cards)、纵向板卡(Vertical Cards)和端口(Ports)可以理解为有贴图的原型对象,材质(Materials)、机柜贴图(Chassies)、板卡贴图(Card Panels)为贴图对象,告示(Billboards)是二维物体,染色(Dye Colors)则是为对象染上一层有颜色的光源。
材质 Materials
MONO Design提供了多种贴图,贴图类型主要有材质(如泥、墙、地板、草地、金属、水等),颜色(红色、橙色、蓝色、绿色、灰色、白色、黑色等)。 选择适当的贴图,加以适当的平铺设置,将其应用于原型对象,即可模拟多种实际业务对象。
有一些较为特殊的材质,例如Transparent透明色,blank挖空效果等。
Row:设置材质横向平铺次数
Column:设置材质纵向平铺次数
Scope:勾选此项,则将此材质应用于对象的所有面。
告示 Billboard
Billboard对象主要用于对象的提示、告警、以及一些常见的房间设施等,无需进一步编辑,可以直接用于对象和房间的编辑。
Billboard对象在画布中,可以沿XYZ轴平移,也可以缩放,但是不能旋转。
染色 Dye Color
将“Dye Color”类目下的颜色拖拽至对象,可对对象的一个面或者全部面进行染色。
Scope:勾选后,将此染色应用于对象的所有面,否则,则只对拖拽面进行染色。
机柜贴图
机柜贴图采集了常见的一些机柜面板,直接拖拽至Cube对象即可模拟机柜。
板卡贴图
板卡贴图主要用于板卡对象。将板卡贴图拖拽至板卡的端口面板,即可应用该贴图。
板卡
MONO Design提供了横向板卡和纵向板卡,可以拖拽至机柜对象,调节其在XYZ轴上的位置。板卡是由两个Cube对象组合成的拼装对象:PCB板和端口面板。
将板卡拖拽至机柜时,板卡会自动垂直于其所在的面。您可以在三个视图中调节板卡相对于机柜的位置,设置动画效果等。
端口
端口也是一个Cube对象,将其拖拽至板卡的端口面板,端口会垂直于面板分布。双击端口,可以设置Cube对象的属性。
4. 保存
原型对象/拼装对象完成后,点击编辑界面右上角的“保存”按钮,可将其保存至模板库。
保存时,系统会根据对象的当前透视图生成对象图标。输入对象名称后,点击“OK”将对象保存至模板库。图中的更新按钮,点击可更新模板库中最新的品类。
组件的模板库可在房间编辑界面右侧“Templates”下的“Component”类目下查看:
同时,创建好的模板可以通过在Template Library中进行再分类。如下图,可将油罐通过选择下拉框中的类别,做再分类。
模板在保存时,系统会为其自动设置主对象。
拖拽模板到绘图区时,会跳出对话框两项选择。如下图:
Open Template in the scene: 在场景中打开模板,可对此模板进行修改。
Insert Template in the scene: 在场景中插入此模板,模板不可做修改。
Component 2D上支持将grid的信息保存到模板。
在MONO Design v1.9中,增加了模板的基本信息显示功能,新建的模板将显示其基本信息,如创建者、模板尺寸、创建时间等。

快捷键及系统设置
编辑器设置
点击工具栏右上角的“编辑器设置”按钮,可进行编辑器的全局设置。房间和组件有各自不同的设置。
组件编辑器设置
Load Resource From: 选择上传资源的路径源
Cloud Key:云服务器用户名
Cloud Password:云服务器密码
Decimal Point Number: 房间坐标系值小数点位数
Show Axis on 3D View: 在3D视图中显示坐标轴
Show Axis Text on 3D View: 在3D视图中显示坐标轴文字
Network Background:编辑器背景色,用六位颜色值设置
Show Floor: 是否显示地板,如勾选,则在3D视图上显示地板平面
Selectable: 是否允许在3D视图中选中对象
Scale minimum limit: 拉伸尺寸最小值限制
Scale maximum limit: 拉伸尺寸最大值限制
Camera Full Rotation:选中此项,实现房间全方位旋转
Zoom Speed:编辑对象时,滚轮滑动的速度
Rotate Speed:旋转速度
Pan Speed: 平移速度
Max Distance:scale的最大距离
Min Distance: scales的最小距离
Near Clipping Plane: 镜头近距离设置
Far Clipping Plane: 镜头远距离设置
Optic Angle:镜头角度
Turn Ambient Light on:打开环境光源
Turn Point Light On:打开点光源
Color: 环境光,点光源的颜色
Postion:点光源的位置
Intensity:点光源的光亮强度
Floor Style:通过下拉框选择,3D组件编辑界面地板的风格。有两种风格可供选择:半透明与网格状。
Floor Size:通过下拉框选择,3D组件编辑界面地板的尺寸,其分为大,中,小。
房间编辑器设置
房间编辑器设置与组件编辑器设置基本相同,都包含坐标轴显示、环境光源、点光源1和点光源2的设置。
Show 2D Property Sheet:在绘制板右边显示房间、组件等属性列表
Show 2D Original Point:在2D绘图中显示坐标原点,其效果会在房间的3D效果中显示
Decimal Point Number: 房间坐标系值小数点位数
Show Axis on 3D View: 在3D视图中显示坐标轴
Show Axis Text on 3D View: 在3D视图中显示坐标轴文字
Network Background:编辑器背景色,用六位颜色值设置
Show Room/Floor Point Coords:显示房间坐标点
Show Room/Floor Dimension:显示房间坐标点间距离
Load Resource From: 选择上传资源的路径源
Cloud Key:云服务器用户名
Cloud Password:云服务器密码
Camera Full Rotation:选中此项,实现房间全方位旋转
Zoom Speed:编辑对象时,滚轮滑动的速度
Rotate Speed:旋转速度
Pan Speed: 平移速度
Max Distance:scale的最大距离
Min Distance: scales的最小距离
Near Clipping Plane: 镜头近距离设置
Far Clipping Plane: 镜头远距离设置
Optic Angle:镜头角度
Turn Ambient Light on:打开环境光源
Turn Point Light On:打开点光源
Color: 环境光,点光源的颜色
Postion:点光源的位置
Intensity:点光源的光亮强度
Show Grid: 显示网格
Grid GAP:网格间距
Snap Grid:设置房间吸附到绘制图版网格上时的长度单位标准
快捷键
2D房间编辑
双击对象:弹出属性编辑
Up:对象沿Y轴向上移动“1”
Down:对象沿Y轴向下移动“1”
Left:对象沿X轴向左移动“1”
Right:对象沿X轴向右移动“1”
Page Up:对象沿Z轴向前移动“1”
Page Down:对象沿Z轴向后移动“1”
Shift + Up:对象沿Y轴向上移动“0.1”
Shift + Down:对象沿Y轴向下移动“0.1”
Shift + Left:对象沿X轴向左移动“0.1”
Shift + Right:对象沿X轴向右移动“0.1”
Shift + Page Up:对象沿Z轴向前移动“0.1”
Shift + Page Down:对象沿Z轴向后移动“0.1”
绘制自由形状的地板、房间和内墙时,按住Ctrl键可以绘制水平或垂直方向的直线。
如果房间大小盖住了地板,仍然可以改变地板材质。
墙体材质拖拽至空白区域,可一次性改变内墙或外墙的材质。
3D房间编辑
按住鼠标左键拖拽对象旋转视图。
按住鼠标右键拖拽对象可在X,Y,Z轴向上平移视图。
Shift + double click:执行动画
Alt + double click:添加告警,并传到parent
组件编辑
双击对象:弹出属性编辑
Up:对象沿Y轴向上移动“1”
Down:对象沿Y轴向下移动“1”
Left:对象沿X轴向左移动“1”
Right:对象沿X轴向右移动“1”
Page Up:对象沿Z轴向前移动“1”
Page Down:对象沿Z轴向后移动“1”
Shift + Up:对象沿Y轴向上移动“0.1”
Shift + Down:对象沿Y轴向下移动“0.1”
Shift + Left:对象沿X轴向左移动“0.1”
Shift + Right:对象沿X轴向右移动“0.1”
Shift + Page Up:对象沿Z轴向前移动“0.1”
Shift + Page Down:对象沿Z轴向后移动“0.1”
Shift + double click:执行动画
Ctrl + double click:将镜头移动至双击的点
按住鼠标左键拖拽对象旋转视图。
按住鼠标右键拖拽对象可在X,Y,Z轴向上平移视图。
拖拽端口对象时,按下ctrl键可改变端口方向。
定制编辑器
Mono Design编辑器本身也是基于mono.js及html、javascript进行开发的网页程序。除了直接使用它以外,开发者还可以方便的对其进行修改和定制,例如通过对菜单、logo、模版等进行修改,快速创建企业自己的编辑器应用程序。本章节将介绍如何对Mono Design编辑器进行修改和定制。
编辑器程序结构
将Mono Design编辑器程序解压后,其中主要目录如下所述。其中可裁剪的部分会特别说明:
css:定义了编辑器程序的样式。可修改css文件中的样式来修改编辑器的外观风格。不可裁剪
demo:使用mono.js进行开发的各种demo演示程序。可裁剪
images:包含了编辑器用到的各种图片,以及demo中用到的图片。用不到的图片可裁剪
jsdoc:包含了mono.js的api说明文档。可裁剪
libs:包含了编辑器所需的各种库文件。不可裁剪
META-INF及WEB-INF:web工程部署所需配置。可裁剪
mono:编辑器程序代码。不可裁剪
resources:编辑器资源及配置文件,不可裁剪
根目录还包括components.html及index.html两个网页,分别对应编辑器的设备编辑器及机房编辑器,也应保留。或根据实际需要进行裁剪(例如如果编辑器只提供机房编辑,则可删除components.html)
修改模板库
左侧模板库内容来自resources目录下的三个文件:
testAssembles.json:组合对象定义,目前版本尚未启用;
testLib.json:定义了左侧模板库Room的内容列表,它是testPrimitives.json文件中定义的项的组合,项的具体内容则在testPrimitives.json中详细定义;
testPrimitives.json:定义了testLib.json中每个项的具体详细内容;
testLib.json
文件testLib.json定义了模版库的内容。可以直接修改成符合自己要求的模版库。下面的修改只定义了几个简单的分类和几个项:
JavaScript
parseLib({
"categories":[
{"id":"Rooms",
"contents":[
{
"subtitle":"Floor",
"children":[{"id":"floor01"},{"id":"floor02"},{"id":"floor03"}]
},
{
"subtitle":"Room",
"children":[{"id":"squareRoomWithFloor"},{"id":"LShapedRoomWithFloor"},{"id":"RoomByPoints"},]
},
{
"subtitle":"Window",
"children":[{"id":"window01"},{"id":"window02"},]
},
]}
]
})
其中children中的每一个具体项只包括了id,id具体定义的内容则在testPrimitives.json中定义。
testPrimitives.json
文件testPrimitives.json定义了testLib.json中定义的每个项的具体内容。
parsePrimitives([
{
"id":"floor01",
"shape":"FloorShapedModel",
"actionType":"CreateFloorShapeNode",
"label":"Draw Floor",
"tips":"Drag and Drop to \nCanvas to Draw\n a New Floor",
"thumbnail":"floor03.png",
"ov":"floor03.png",
"ov-s":"specified shape type",
"dm":"material 0",
"dt":"floor02_3d.png",
"size":{"x":200,"y":20,"z":100},
"pos":{"x":0,"y":0,"z":0},
"rot":{"x":0,"y":0,"z":0},
"repeat":{"row":3,"column":3},
},
其中每一项定义了一个具体的模板内容。
id:唯一,可在testLib.json中通过id进行指定;
shape:所属类型,mono编辑器中目前支持这几种类型:FloorShapedModel(地板),RoomModel(房间),RoomWithFloorModel(带地板的房间),BlockModel(门窗),FloorShapedModel(管道)
actionType:拖拽图标到拓扑图后拓扑图所处的编辑模式,支持以下几种类型:CreateFloorShapeNode(创建地板),CreateInnerWallShapeNode(创建内墙),CreateImageShapeNode(创建房间),CreateRoomWithFloorShapeNode(创建带地板的房间),CreatePipeShapeNode(创建管道),CreateRoundPipeShapeNode(创建圆形管道)
label:项上显示的文字标签
tips:鼠标滑过项时的提示文字
thumbnail:项的小图标路径
ov:拖拽该项到2D平面上时显示的拖拽图片
ov-s:保留字段
dm:保留字段
dt:3D场景中3D对象所采用的贴图图片
size:所生成的2D和3D对象的大小
pos:所生成的2D和3D对象的位置
rot:所生成的2D和3D对象的旋转度
repeat:贴图的repeat
dshape: 所生成的2D和3D路径对象的各个点的位置
embeded:是否需要吸附到墙上,比如门和窗需要吸附到墙上
修改页头页脚
页头包括logo、右上角的连接栏。页脚主要是公司版权信息等。
修改logo,可以准备一张大小合适的图片(建议尺寸:300*40),并修改index.htm的下面内容:
修改下面代码可以设置自己的右侧连接。如不需要,也可将这部分内容直接删除:
页脚部分,显示了公司名及版权信息,代码如下,可直接修改:
JavaScript
修改菜单及工具栏
主菜单可以直接在index.html文件中直接修改。菜单是通过一个嵌套的ul标签实现的。
其中,菜单的动作可以直接在onclick中定义:
<li><a href="#" onclick="callme()">Menu Item</a></li>
下面的代码定义了一个菜单分割栏:
<li class="separator"></li>
请注意:菜单目前不支持多级菜单。菜单宽度如和文字宽度不相称,可调整其css样式。
工具条的定义在index.html中的如下位置:
通过定义input标签来增加按钮。按钮的图片、样式等,可以通过class指定并在css中设置。
其他
还有其他一些可以定义的内容。例如,editor启动是否显示“Room/Component“选择对话框。可以通过修改index.html中的下面代码参数实现:
<body onload="$startEditor(true)" style="margin:0">
startEditor函数中的boolean值控制是否隐藏启动对话框。如不输入或false则显示,如输入true则隐藏,直接进入room编辑状态。
下面实例演示了如何创建一个完整的自定义房间编辑器:
主要代码如下:
<body onload="$startEditor(true)" style="margin:0">
<div class="header">
<div class="top">
<div class="top_left">
<img class="logo" src="images/my-logo.png" />
<div class="top_title"></div>
</div>
<div class="top_right">
<a href="http://twaver.servasoft.com">Link</a>
|
<a href="http://twaver.servasoft.com/forum/">Link</a>
|
<a href="http://twaver.servasoft.com/blog">Link</a>
|
<a href="demo/index.html">Link</a>
</div>
</div>
<div class="clear"></div>
<div class="menu">
<!-- Begin CSS Horizontal Popout Menu -->
<div id="menuh-container">
<div id="menuh">
<ul style="width:60px; padding-right:10px;">
<li><a href="#" class="top_parent">Menu</a>
<ul>
<li><a href="#" onclick="return false">Menu Item</a></li>
<li><a href="#" onclick="return false">Menu Item</a></li>
<li><a href="#" onclick="return false">Menu Item</a></li>
</ul>
</li>
</ul>
<ul style="width:70px;">
<li><a href="#" class="top_parent">Menu</a>
<ul>
<li><a href="#" onclick="return false">Menu Item</a></li>
<li><a href="#" onclick="return false">Menu Item</a></li>
<li><a href="#" onclick="return false">Menu Item</a></li>
<li class="separator"></li>
<li><a href="#" onclick="return false">Menu Item</a></li>
<li><a href="#" onclick="return false">Menu Item</a></li>
</ul>
</li>
</ul>
<ul style="width:65px;">
<li><a href="#" class="top_parent" onclick="return false">Menu</a>
<ul>
<li><a href="#" onclick="return false">Menu Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- End CSS Horizontal Popout Menu -->
<a><input type="button" class="setting" onclick="$ces4R()"/></a>
<input id ='btn3d' type = "button" class="transform2d_two" onclick="$s3d(this)">
<input id ='btn2d' type = "button" class="transform2d_one" onclick="$s2d(this)">
<a><input type="button" class="setting" onclick="alert('do something here')"/></a>
</div>
</div>
<div id = 'main'></div>
<div class="footer"><span></span>Copyright <script type="text/javascript">document.write(new Date().getFullYear())</script> My Company Name.</div>
</body>