Logo

Menu

曾经的MONO Design编辑器

TWaver
Published on 2024-12-15 / 170 Visits
0
0
#数字机房#TWaver

快速上手

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. 基本操作和按钮

搭建房间主要是通过拖放对象到画布来实现的。拖放到画布上的对象，可以继续拖拽来设置它的尺寸，也可以双击对象，进入详细属性设置界面。

对象拖放

选中左侧列表里的基本对象后，用鼠标拖放至画布即可。

Room 02

同时，可实现shapenode删除点的功能。需按住Alt键，鼠标点击确定要删除的点后，出现对话框，点击Ok，确定删除。如下图：
556

在mono v1.6.5版本中，更改了鼠标样式。同时，鼠标移至两点之间，光标将变身成加号，添加一个节点。而当删除节点时，光标将变成一减号。

比例尺功能

size
比如：100PX=1m，指100个像素表示1m长度。画布上尺寸单位为：像素。

全方位旋转

在编辑器设置中选中全方位旋转选项，便可实现对3D房间全方位旋转展示。
camera full rotation

全方位旋转展示，如下图：
room

属性设置

对象拖放至画布后，双击对象可以设置其详细属性。

Room 03

2D/3D切换

房间使用2D编辑，3D展示的方式，用户可以点击“3D”按钮切换至3D视图查看对象。

Room 04
在3D界面增加了一些常用工具条。如下图：
700
其中，最右边按钮是对象的对齐显示按钮的快捷键。

保存

点击“保存”按钮，可将当前的场景保存为图纸。

Room 05

保存后的图纸，可在“Templates”的“Room”类目下查看。

Room 07

无论是在2D或者3D场景下，都可以保存房间的图纸，保存时，系统会按当前视角捕捉房间的图片作为图纸的图标。

Room 06

输入图纸的名称后，点击“OK”保存，保存后的图纸，可在“Templates”的“Room”类目下查看。

删除

选中一个对象后，点击“delete”键来删除该对象。

Room 08

清除

点击“CLEAR”按钮，清除画布上的全部对象。确认清除前，会有弹窗消息提示。

Room 09

新建

点击“NEW”按钮，回到主页，可以选择新建一个房间，或者组件。
flex 3d
在新建的下面，导出图纸模板，可以将编辑的对象保存成json文件，并支持json文件导入。实现3D部分文件的共享互用。

在组件和房间的新建标签下，可以将绘制好的文件导出为Flex 3D 文件， 如下图：
flex 3d-1

在Tools标签项下，我们可以上传DXF文件，作为Network的背景，以做创建模型参考。
559

Autocad图纸上传后，可直接生成墙体、门和窗体，如下图：
2D room
room

3D房间
3D room

编辑器设置-云存储

MONO Design提供了云存储功能。其帮助用户将创建完毕的模板保存到云服务器上。同时， MONO Design为用户提供了一些公用模板，供用户直接使用，公用模板不可删除。点击编辑器设置按钮，进行云存储设置，如下图：
489

在load resource from 下拉框选择“Cloud”, 同时输入 MONO Design提供给您的Cloud Key。点击“Ok”完成设置，如下图。
490

设置完毕后，在编辑页面的左侧会显示Public Template，点击可查看详细模板并应用。Template 显示您自创建的模板。自创建模板与公用模板均存储在云服务器上。如下图。
491

如果不进行云存储设置，自创建模板会存储在本地服务器。

在mono 1.8版本中，其支持将模板拖拽的同时，模板会自动默认放置于地板上。
可以对房间和组件模板进行分类命名，每个类别下的模板数目显示。如下图。
689

自定义属性

基于软件使用者需求， MONO Design 对房间、地板、窗、门、门洞及其他组件对象提供了属性设置界面，通过自定义属性，使用者在基于 MONO Design二次开发时，可以灵活调用此属性，满足实际开发需求。目前，此属性设置仅供开发者调用。
user property

批量创建机柜

创建机房中的机柜时，可以实现批量创建功能。按住Ctrl键，同时拖拽机柜，会出现一个对话框，设置几行几列以及彼此间的间距大小值，生成所需机柜数目。如下图：
548
Rows：设置行数
Column：设置列数
X Gap: 横向间距大小
Y Gap：竖向间距大小

在此我们设置两行四列，如下图：
549
550

侧边栏视图

在新发布的MONO Design v1.9版本中，在组件编辑器和机房编辑器的画布右侧栏上增加了树形侧边栏视图。

在多个组件对象或房间存在时，能够轻松快捷选中组件图像，点击detail下对应的编辑按钮，可以快速设置其属性，并明确各对象间的父子关系。图标为眼睛的按钮，点击可以显示或隐藏相应的编辑对象，使编辑画面及过程更流畅清晰。如下图所示。
728

点击编辑按钮，出现对象属性设置窗口。
729

与组件编辑器不同的是，在机房编辑器界面，在侧边栏视图下方，新版本还增加了鹰眼视图模式。在房间溢出整个编辑绘图框时，通过鹰眼视图，可以上下左右移动白色框，查看房间的具体细节。如下图。
730

日志查询

如许多软件提供日志查询功能一样，MONO Design v1.9版本中新增了日志查询的功能。在在点击新建的页面出现后，右下角出现系统日志的说明。点击可以查看，但必须有权限的系统用户方能使用。

系统日志
731

系统日志界面
732

窗口缩放

新版中中增加了在MONO Design编辑器中增加了窗口左右缩放和上下缩放功能，给编辑器中的视图绘制提供更多灵活空间。如下图所示。

绘图区窗口上下缩放：
736

绘图区窗口左右缩放：
737

2. 地板

TWaver MONO Design支持固定形状和自由形状的地板编辑。

绘制地板


如果您需要绘制较为规则的地板形状，例如方形、L形地板区域等，可直接将已有的地板对象图标拖放至画布。如下图所示，拖放“Square Floor”至画布，绘制方形地板区域，拖放斜凸形地板至画布，绘制相应地板区域。

floor-drage-1

地板形状拖放至画布后，任意选中一个地板形状后，可以继续通过拖拽该形状的顶点来改变其形状和大小。其中，拖放“圆形顶点”可改变地板区域的形状，拖放“直角形”来改变形状的长宽比例。

除了固定形状的地板区域外， MONO Design还支持绘制任意形状的地板区域，满足不同的应用需求。 如需开始绘制任意形状的地板区域，只需将“Draw Floor”按钮拖放至画布，此时鼠标状态自动切换为“绘图”模式，您可以开始在画布上绘制您需要的地板形状。

Room 013

绘制任意形状地板的步骤如下：

1. 单击鼠标确定形状顶点
2. 拖放绘制直线
3. 单击鼠标确定第二个顶点，以此类推
4. 绘制结束后，双击鼠标确定形状终点

注：拖拽时，按住Ctrl键可以绘制水平或者垂直方向的直线。

Room 014

确定终点后，终点和起点自动连线，构成封闭区域。

Room 015

选中地板后，可以调节其形状和大小。

地板材质

地板区域确定后，您可以继续编辑地板的材质。 MONO Design提供了多种地板材质可供选择。从界面左侧拖放一种地板材质到地板区域来改变地板材质。

Room 016

地板属性

双击地板区域，可以设置地板的属性，地板的形状和大小可通过拖拽调节，此处设置坐标主要用于平移形状。
Location X：地板左上角顶点在X轴上的坐标
Location Y：地板左上角顶点在Y轴上的坐标
Transparent：是否支持贴图透明
Opacity：材质透明度设置，0-1，0为全透明，1为不透明。
Image：地板贴图路径
Repeat:地板贴图重复次数
Deep：地板厚度设置

735

在MONO Design v1.9中，在地板的属性设置框中增加了点设置的功能，进一步提高地板不规则形状设置的便利性。如下图所示：
734

3D视图

地板的编辑工作都是在2D界面完成的，在编辑过程中，您可以随时切换至3D模式进行查看。点击“3D”按钮，即可将当前2D视图切换为3D视图。

floor-1

3D视图仅供查看，您可以进行全方位旋转、缩放等操作，但不会改变对象的任何值。
如要回到2D编辑界面，再次点击“2D”按钮即可。

3. 房间（墙体）

房间（Room），是由不同的墙体构成的，因此，房间的绘制和编辑也可以认为是墙体的绘制与编辑。您可以快速绘制固定形状的房间，也可以绘制自由形状的房间，并可在房间中放置内墙。

在 MONO Design v1.2版本中，对墙体建模进行改进，去掉墙体中的柱子对象，无需考虑墙体中拐角处的对接问题。

绘制房间

如果您需要绘制较为规则的房间形状，例如方形房间、L形房间等，可直接将已有的房间对象图标拖放至画布。如下图所示，拖放“Square Room”至画布，绘制方形房间，拖放“L-Shape Room”至画布，绘制L形房间。此外，为了便于快速绘制，我们还提供了带有地板材质的方形，L型房间和凸形房间等。
room09

房间形状拖放至画布后，可任意选中一个房间形状，继续通过拖拽该形状的顶点来改变其形状和大小。其中，拖放“圆形顶点”可改变房间的形状，拖放“直角形”改变其的长宽比例，拖放某一条边也可改变房间的形状。

Room 020

除了固定形状的房间外，您也可以绘制任意形状的房间，满足不同的应用需求。如需开始绘制任意形状的房间，只需将“Draw Room”图标按钮拖放至画布，此时鼠标状态自动切换为“绘图”模式，您可以开始在画布上绘制您需要的房间形状。

Room 021

如前文所述，绘制房间形状，即绘制房间各个面的墙体。在绘制过程中，您可以随时切换至3D视图进行查看。

1. 单击鼠标确定形状顶点
2. 拖放绘制直线
3. 单击鼠标确定第二个顶点，以此类推
4. 绘制结束后，双击鼠标确定形状终点。

注：拖拽时，按住Ctrl键可以绘制水平或者垂直方向的直线。

Room 022

选中房间后，可以调节其形状和大小。

Room 023

同时，在v1.2版本中，使用者可直接输入拐点坐标创建房间。
input-room

点击Input Room，如下图：
input room-1
点击OK，生成一个房间。
input room-2

MONO Design v1.3版本增加了房间自动吸附到网格上的功能。即在绘制房间的过程中，根据设置的吸附尺寸，自动吸附到最合适的网格位置。吸附尺寸大小，在编辑器设置中进行设置。
按住S键，同时拖动鼠标，将显示房间在网格中的吸附位置，如下图绿色圆点：
absorb

这里编辑器设置中设定的吸附尺寸为100单位，比如，原来房间一点坐标为（455，75），以100的单位自动吸附在网格的坐标为：(500,100);
absorb-1

房间内墙

如需在房间内绘制内墙，可以将“Interior Wall”图标按钮拖放至画布，此时鼠标状态自动切换为“绘图”模式，您可以开始在画布上绘制您需要的内墙。内墙用较细的线条表示，默认不闭合。

绘制过程为：
1. 单击鼠标确定形状顶点
2. 拖放绘制直线
3. 单击鼠标确定第二个顶点，以此类推
4. 绘制结束后，双击鼠标确定形状终点。

内墙默认为不闭合，绘制完成后，您可以选择内墙，调节其形状和大小。

Room 024

在MONO Design v1.3版本中，在绘图板上绘制墙体完毕后，可直接拖地板吸附到墙体，快速创建一个房间，无需再手动调墙体与地板的对接。

房间属性

双击任意外墙、内墙，可以调出房间属性，如下图所示：

room-property

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）三个部分。

wall

注意：对于外墙来说，其外侧为external face, 内侧为Internal face；对于内墙来说，其两侧均为Internal face。

墙体材质分为纹理材质和非纹理材质。

将非纹理材质贴图应用于墙体表面时，可分别设置墙体外侧、内侧和框架的贴图。

Room 027

将纹理材质贴图应用于墙体表面时，可设置内侧和外侧的贴图：

Room 028

另外，当把材质拖放至墙体内部区域时，表示对该区域的房间或内墙材质作出更改；(Change Room Material)
当把材质拖放至墙体外部区域时，则表示对所有区域的墙体材质作出更改。(Change All Room Material)

3D视图

搭建好的房间，可点击“3D”按钮查看。

4. 窗/门/窗洞/管线

构建完地板、房间后，您可以使用TWaver 3D来绘制房间所需的门、窗体以及管线。在v1.8版本中，支持门窗贴图修改。

窗

在画布左侧栏的“Window”类目下，我们提供了多种材质的窗体。将所需的窗体拖放至墙上，即可在墙上绘制窗体。

Room 029

窗体的长度和位置可以直接在画布上拖拽调节：

Room 030

双击窗体，可设置其他属性：

688

Full Width：勾选，将窗体设为与墙体等宽
Height：窗体高度
Length：窗体宽度
Specular Strength:设置窗的光照强度
Transparent：是否支持贴图透明
Opacity：材质透明度设置，0-1，0为全透明，1为不透明。
Vertical Position: 窗体的离地高度
Animation：下拉菜单选择演示动画，支持270度旋转动画
Picture：选择后面搜索按钮，修改们的材质或贴图。
Horizontal Flip:水平翻转，选中之后，门会自动进行翻转。

点击“3D”按钮，可查看墙体和窗的3D效果，Shift+双击窗体，可以查看动画效果。

门

在画布左侧栏的“Door”类目下，拖拽门至任一墙体，可在墙体上绘制门。

Room 032

门的长度和位置可以直接在画布上拖拽调节，双击门，可设置其他属性：

687

Full Width：勾选，将门设为与墙体等宽
Height：门的高度
Length：门的宽度
Specular Strength:门的光照强度
Transparent：是否支持贴图透明
Opacity：材质透明度设置，0-1，0为全透明，1为不透明。
Animation：下拉菜单选择演示动画，支持270度旋转动画。
Picture：选择后面搜索按钮，修改们的材质或贴图。
Horizontal Flip:水平翻转，选中之后，门会自动进行翻转。

点击“3D”按钮，可查看墙体和门的3D效果，Shift+双击门，可以查看动画效果。

窗洞

除了门和窗，您还可以在墙体上实现没有材质的窗洞效果，将“Cutoff”拖拽至墙体即可。

Room 034

窗洞的长度和位置可以直接在画布上拖拽调节，双击窗洞，可设置其他属性：

cutoff
Full Width：窗洞是否适应整面墙的宽度
Height：窗洞的高度尺寸
Specular Strength：设置窗洞的光照强度
Transparent：是否支持贴图透明
Opacity：材质透明度设置，0-1，0为全透明，1为不透明。
Position Y：窗洞的离地高度

点击“3D”按钮，可查看门和窗户的3D效果，Shift+双击门或窗，可以查看动画效果。

管线

在画布左侧的“Pipe”类目下，用户可鼠标拖拽相应的管线到画布，点击定位，拖拽，点击定位，以此类推，创建管线。管线分两类，一是拐弯位置为棱角的管线，标识为红色；二是拐弯位置为弧形的管线，标识为绿色。两种管线绘制方法相同。 如下图：
pipe-1

双击红色管线，可以修改其属性，如下图：
Pipe property-2

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视图，拐弯处为棱角管线。拐弯处为弧线的管线。如下图：
3d-pipe-3

在v1.2版本中，使用者可对房间的管线进一步可视化编辑，设置管线的离地高度等。如下图:
pipe

5. Billboard

Billboard类目下提供了一些常见的物品，如空调、灭火器、盆栽等，可直接拖放至画布。Billboard物品的离地高度为0，选中物品，可调节其在房间里的位置，通过鼠标滚轮调节物品大小。

Room 035
Billboard的垂直感觉更立体。

MONO Design除了绘制简单的单层房间外，还可以建立多个楼层，每层上可分别绘制房间。每个楼层的高度，是否可见，都可单独设置。

二、创建多楼层机房

1. 新建楼层

打开房间编辑界面，默认的楼层为1楼（1st Floor）。

floor 01

点击下拉菜单，点击“Add New”，建立一个新楼层。

floor 02

新楼层的属性设置如下：

floor 03

Floor Name：自定义的楼层名称
Floor Height：楼层的离地高度，设置时需要考虑到楼层高度和墙高的关系。
Clone：勾选此项，并从“Clone Floor”里选择一个已有楼层，则新建的楼层会拷贝“Clone Floor”楼层里的全部对象。

多个楼层添加后，可通过下拉菜单里的楼层管理（Floor Management）来统一设置楼层的属性：

floor 04

Name: 楼层的名称，添加楼层时定义，可以随时修改
Height：楼层的离地高度
Ref: 参考楼层，被设置为ref的参考楼层的内容将会始终显示在画布上，作为其他楼层的绘制参考。
Action: 选中楼层，点击“↑”将该楼层在管理表格中向上移一层。点击“↓”将楼层向下移一层。箭头只改变楼层名称在表格中的排序，以及在添加楼层下拉菜单中的排序，不会改变楼层本身层数和高度。点击“X”将会删除该楼层的所有数据。

2. 3D视图

点击“3D”按钮，可查看所有楼层的3D视图：
floor 05

3D视图下点击“楼层设置”按钮，可以设置楼层是否可见。
floor 06
floor 07

三、使用设备编辑器

MONO Design将所有非环境对象称之为“组件”。 一个“组件”通常由一个或几个基本几何图形构成模型对象，并通过材质、颜色、贴图来增强模型对象的逼真渲染。例如，用一个长方体表示一个交换机，用一个圆柱体表示房间内的一根柱子等。“组件”可在3D下多视图拖放编辑。

启动 MONO Design编辑器后，选择“Start a new Component”进入组件编辑页面，如下图所示。
691

目前 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版本中，画布是非透明的黄色网格风格。
555

在mono v1.6.5版本中，画布上增加了2D的编辑画布及保存模板功能，之前四个3D编辑视面板块合并至其他三个板块，并在相应的板块中可以自由切换3D视图展示。如下图。

2d-1
同时，点击组件的对象，我们可以看到部分属性设置增加了下拉列表设置。

拖拽一个Cube到画布，我们可以看到，如上图标识。
圈1和圈2表示 点击任意按钮，切换3D对象视图编辑模式。
圈3 表示：cube对象的2D编辑画布。
圈4 表示：在此画布可360度查看3D编辑对象。

接下来，我们演示如何对3D对象在2D编辑画布上进行更细致的编辑。
按住Alt键，选定要编辑的3D对象的一面，双击鼠标，这一面将会在2D编辑画布上显示出来。此操作可用于机柜详细创建板卡，端口或类似要对详细一面的编辑上。在此，我们以为一机柜添加板卡和端口为例演示。如下图。
2d-2

2d-3
其中，“Resize”可以使网格与机柜自动重合。

2d-4

点击OK后，看板卡已放置在机柜中，如下列图示，为板卡添加相应的批量添加端口，也可单拖拽端口到板卡放置。
2d-5
2d-6
2d-7
点击OK后，端口会自动排列在板卡上。如下图：
2D-8

这样一个机柜及相应的板卡和端口号便通过的2D的界面编辑完毕。

此外，在MONO Design 1.7版本中，可在此网页首图中看到，在Components3D编辑页面中，显示编辑对象及其面的数量。在Components 2D上增加了快速复制的功能。
同时，在2D编辑画布上实现对象贴图在其2D和3D模式下的同步更新实现。3D对象贴图未加载上时，系统默认被编辑对象面上显示设置一张有TWaver标识的贴图。

Components 3D 编辑互动功能。在之前的版本中，可以对编辑的组件对象进行360度旋转，在此通过简单的按钮可做快速的查看，缩小与放大。如下图：
Component 3D

圈3 表示 移动（move），通过鼠标点击图中箭头指的红色、绿色或蓝色箭头，实现3D编辑对象的左右上下前后的移动，如下图
move

圈4 表示 旋转(Rotate),通过鼠标点击图中箭头指的红色、绿色或蓝色半环，实现3D编辑对象的左右上下前后的旋转。如下图：
rotate

圈5 表示 拉伸(Scale),通过鼠标点击图中箭头指的红色、绿色或蓝色细锥，实现3D编辑对象的左右上下前后的尺寸拉伸。如下图：
scale

圈2 表示移动，旋转以及拉伸的功能同时显示在编辑对象上。如下图：
scale rotate move

圈1，点击其箭头，上面显示的任意功能即撤销。

在mono 1.8版本中，在绘图页面，增加了对象之间连接的功能，主要用于房间内、机房内线路的表示。如下图Link图标示。
686

在画布任意拖拽两个对象，全部选中，点击Link图标，会出现一个对话框，选择link的特点，包括，link 风格，linK Size等，如下图：
681

Link Style: 连线的风格，通过下拉框选择。
Link Color: 连线的颜色，可以填写相应颜色，必须用英文。
Link Size: 连线的尺寸。
Link Extend: 连线延伸

效果图如下：
682

导入功能

MONO Design 编辑器左上方，提供了文件导入功能，支持OBJ文件的导入, 同时支持保存在本地文件obj的导入。
import drawing

导入CAD图纸的功能，可以直接通过CAD图生成墙体、门和窗体?

菜单栏

菜单栏上有一些常用图标：
component 03

从左到右依次为：

平移：单击启用按钮后，可拖拽视图内的3D物体沿着X，Y，Z轴进行水平移动。
旋转：单击启用按钮后，可拖拽视图内的3D物体绕着X，Y，Z轴向旋转。
缩放：单击启用按钮后，可通过拖拽视图内的3D物体，改变其长宽高尺寸。
逆时针旋转90°：将当前选中对象绕轴逆时针旋转
顺时针旋转90°：将当前选中对象绕轴顺时针旋转
NEW：新建一个房间或组件，系统会提示是否保存当前画布
CLEAR：清除画布上的所有对象

2. 原型对象

MONO Design使用原型对象来组建3D模型，主要原型对象包括Cube（立方体），Sphere（球体），Cylinder（圆锥）、Torus（圆环）和Pipe(管线)五种。
双击建好的对象，会跳出对话框，选择动画一项，可以进行丰富的动画效果设置。如下图：
703
Action：通过下拉框，选择是旋转还是平移。
Anchor/Direction：通过下拉框，选择旋转或平移的方向。
Value：选择旋转或平移的值。

通常来说，原型对象的属性主要包括以下几种。

主对象：原型对象的OID属性，设置为“main”表示将该原型对象设置为主对象。几个原型对象进行拼装后，可以用于表现更加复杂的业务对象，我们称之为拼装对象。拼装时，需指定其中的一个对象为主对象，以该主对象中心为相对原点，来描述其他对象相对于该原点的位置、旋转角度和以及相对于自身的缩放比例等。

动画效果：您可以为每个原型对象设置动画效果，在进行3D演示时，通过快捷方式可以调出这些动画效果。
component 04

位置：在编辑器中，可以通过拖拽来改变原型对象的位置，也可以通过设置原型对象中心在X，Y，Z轴上的坐标来精确设置原型对象的位置。

尺寸：原型对象的尺寸参数，例如cube对象的尺寸由长宽高决定，sphere对象的尺寸由直径决定等。

材质：原型对象本身的默认材质。

材质贴图：除了原型对象本身的材质外，您可以对其进行贴图，来改变原型的对象的外观。

材质贴图方式：可自定义贴图水平和纵向的重复次数。

材质贴图是否允许半透明：允许材质贴图半透明后，可以为原型对象设置半透明贴图。

材质透明度：0-1，0为全透明，1为不透明。

Cube对象及其属性

立方体、或者长方体对象，统称为Cube对象。Cube对象的形状可以通过设置其长、宽、高来决定。

Cube对象的属性参数如下：
component 05

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对象及其属性

component 07
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，即可生成一个四棱锥。

component 06
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对象及其属性

component 08
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-type-1

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: 管线盖切分单位
pipe-parameters-2

文字对象及其属性

MONO Design在其v1.2版本中增加了文字对象。
Text
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-object

Text: 显示的文字内容
Font: 下拉框设置文字字体
Style: 下拉框设置文字风格
Text

Combo对象及其属性

拖拽combo对象到绘制板，会自动显示出3D视图，双击视图，显示其属性设置对话框。
combo-1
combo

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为不透明。

生成的组合对象可以保存为本地模板，在房间的创建应用中使用，任意拖拽。
546
547

双击组合对象，会跳出一个对话框，显示组合体的坐标值，此值不可更改。
702

Lathe对象及其属性

MONO Design在其v1.3版本中增加了Lathe对象，用于绘制旋转体业务对象。

拖拽Lathe 对象到绘图板上，会出现Lathe的路径绘制图，鼠标拖拽绘制，双击绘图板，结束绘制。如下图：
lathe path

Lathe 3D视图
lathe 3d

在编辑器设置中，可设定此3D视图为全方位旋转模式。
双击Lathe 3D视图，显示其属性框：
lathe 3d property
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 property
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挖空效果等。

应用材质贴图时，可以设置材质的平铺数量，如下图所示：
component 09

Row：设置材质横向平铺次数
Column：设置材质纵向平铺次数
Scope：勾选此项，则将此材质应用于对象的所有面。

告示 Billboard

Billboard对象主要用于对象的提示、告警、以及一些常见的房间设施等，无需进一步编辑，可以直接用于对象和房间的编辑。

Billboard对象在画布中，可以沿XYZ轴平移，也可以缩放，但是不能旋转。

染色 Dye Color

将“Dye Color”类目下的颜色拖拽至对象，可对对象的一个面或者全部面进行染色。

染色属性设置如下：
component 010

Scope：勾选后，将此染色应用于对象的所有面，否则，则只对拖拽面进行染色。

机柜贴图

机柜贴图采集了常见的一些机柜面板，直接拖拽至Cube对象即可模拟机柜。
component 011

板卡贴图

板卡贴图主要用于板卡对象。将板卡贴图拖拽至板卡的端口面板，即可应用该贴图。
component 012

板卡

MONO Design提供了横向板卡和纵向板卡，可以拖拽至机柜对象，调节其在XYZ轴上的位置。板卡是由两个Cube对象组合成的拼装对象：PCB板和端口面板。
component 013

将板卡拖拽至机柜时，板卡会自动垂直于其所在的面。您可以在三个视图中调节板卡相对于机柜的位置，设置动画效果等。
component 014

端口

端口也是一个Cube对象，将其拖拽至板卡的端口面板，端口会垂直于面板分布。双击端口，可以设置Cube对象的属性。
component 015

4. 保存

原型对象/拼装对象完成后，点击编辑界面右上角的“保存”按钮，可将其保存至模板库。
692

保存时，系统会根据对象的当前透视图生成对象图标。输入对象名称后，点击“OK”将对象保存至模板库。图中的更新按钮，点击可更新模板库中最新的品类。

组件的模板库可在房间编辑界面右侧“Templates”下的“Component”类目下查看：
component 017

同时，创建好的模板可以通过在Template Library中进行再分类。如下图，可将油罐通过选择下拉框中的类别，做再分类。
693

模板在保存时，系统会为其自动设置主对象。
拖拽模板到绘图区时，会跳出对话框两项选择。如下图：
701
Open Template in the scene: 在场景中打开模板，可对此模板进行修改。
Insert Template in the scene: 在场景中插入此模板，模板不可做修改。

Component 2D上支持将grid的信息保存到模板。

在MONO Design v1.9中，增加了模板的基本信息显示功能，新建的模板将显示其基本信息，如创建者、模板尺寸、创建时间等。
738
快捷键及系统设置

编辑器设置

点击工具栏右上角的“编辑器设置”按钮，可进行编辑器的全局设置。房间和组件有各自不同的设置。

组件编辑器设置

704
Load Resource From: 选择上传资源的路径源
Cloud Key:云服务器用户名
Cloud Password:云服务器密码

705

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: 拉伸尺寸最大值限制

706
Camera Full Rotation：选中此项，实现房间全方位旋转
Zoom Speed：编辑对象时，滚轮滑动的速度
Rotate Speed：旋转速度
Pan Speed: 平移速度
Max Distance：scale的最大距离
Min Distance: scales的最小距离
Near Clipping Plane: 镜头近距离设置
Far Clipping Plane: 镜头远距离设置
Optic Angle：镜头角度

707
Turn Ambient Light on:打开环境光源
Turn Point Light On:打开点光源
Color: 环境光，点光源的颜色
Postion：点光源的位置
Intensity：点光源的光亮强度

708
Floor Style：通过下拉框选择，3D组件编辑界面地板的风格。有两种风格可供选择：半透明与网格状。
Floor Size：通过下拉框选择，3D组件编辑界面地板的尺寸，其分为大，中，小。

房间编辑器设置

房间编辑器设置与组件编辑器设置基本相同，都包含坐标轴显示、环境光源、点光源1和点光源2的设置。
694

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:显示房间坐标点间距离

696
Load Resource From: 选择上传资源的路径源
Cloud Key:云服务器用户名
Cloud Password:云服务器密码

695
Camera Full Rotation：选中此项，实现房间全方位旋转
Zoom Speed：编辑对象时，滚轮滑动的速度
Rotate Speed：旋转速度
Pan Speed: 平移速度
Max Distance：scale的最大距离
Min Distance: scales的最小距离
Near Clipping Plane: 镜头近距离设置
Far Clipping Plane: 镜头远距离设置
Optic Angle：镜头角度

697
Turn Ambient Light on:打开环境光源
Turn Point Light On:打开点光源
Color: 环境光，点光源的颜色
Postion：点光源的位置
Intensity：点光源的光亮强度

698

Show Grid: 显示网格
Grid GAP：网格间距
Snap Grid：设置房间吸附到绘制图版网格上时的长度单位标准

699
选中此项，使得模板可以自由缩放。

快捷键

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中定义。

96

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的下面内容：

82

将其中的图片换成您的logo图片即可。效果如下：
84

修改下面代码可以设置自己的右侧连接。如不需要，也可将这部分内容直接删除：
82

87

页脚部分，显示了公司名及版权信息，代码如下，可直接修改：

JavaScript

1

<div class="footer"><span></span>Copyright <script type="text/javascript">document.write(new Date().getFullYear())</script> My Company Name.</div>

88

修改菜单及工具栏

主菜单可以直接在index.html文件中直接修改。菜单是通过一个嵌套的ul标签实现的。
90
其中，菜单的动作可以直接在onclick中定义：

<li><a href="#" onclick="callme()">Menu Item</a></li>

下面的代码定义了一个菜单分割栏：

<li class="separator"></li>

91

请注意：菜单目前不支持多级菜单。菜单宽度如和文字宽度不相称，可调整其css样式。

工具条的定义在index.html中的如下位置：
92
通过定义input标签来增加按钮。按钮的图片、样式等，可以通过class指定并在css中设置。
93

其他

还有其他一些可以定义的内容。例如，editor启动是否显示“Room/Component“选择对话框。可以通过修改index.html中的下面代码参数实现：

<body onload="$startEditor(true)" style="margin:0">

startEditor函数中的boolean值控制是否隐藏启动对话框。如不输入或false则显示，如输入true则隐藏，直接进入room编辑状态。

下面实例演示了如何创建一个完整的自定义房间编辑器：
94
主要代码如下：

<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>

Mono Design如何将3DS...

Comment