TWaver MONO Design
概述
欢迎使用TWaver MONO Design!MONO Design是TWaver 3D产品统称,包括3D建模编辑工具、模板库以及mono开发包。开发者可以通过直接使用mono开发包以及API来创建各种3D应用程序。MONO Design基于WebGL及HTML5,开发者需要掌握JavaScript语言和基本的HTML知识。
Mono开发所需的js库文件主要包括:
- mono.js:mono核心库,包括3D模型及基础API;
- mono_template.js:模板操作API,提供数据模板的导入及导出功能;
- mono_toolkits.js:工具库,方便开发者使用mono开发包进行3D场景构建和应用,帮助开发者更便捷操作3D对象,管理3D场景,以及应用3D特效的函数和对象;
MVC设计架构
Mono采用了TWaver一贯的MVC(Model,View,Controller)架构。DataBox作为Model层,是一个容器管理对象,用来管理所有的3D对象。Network是3D的呈现渲染画布,也是MVC中的View层。而交互及基于事件监听机制则代表了控制层Controller。Mono的MVC结构如下图:
DataBox是一个对象管理容器。所有要显示的3D对象都放置在这个容器中统一管理。容器会负责3D对象的增、删、查等工作,同时监听数据的变化并通过事件监听机制进行广播通知。Network则是负责具体显示的画布,它必须连接到一个具体DataBox容器,并将容器中的数据绘制到canvas画布上。DataBox和Network作为数据管理者和画布渲染者独立工作、各司其职。
支持浏览器
开发者需要在支持WebGL的浏览器上调试运行mono程序。包括:
- Chrome v30及以上
- IE v11及以上
- Safari
- FireFox
- Opera
可以点击网址get.webgl.org来检查浏览器是否支持WebGL。如果能够看到一个旋转的立方体,则说明浏览器支持WebGL(如下图)。
开发工具及调试
JavaScript开发可以选择使用Eclipse、NetBeans、Visual Studio等大型IDE工具,也可以选择直接使用文本编辑工具如EditPlus、UltraEdit等。前者可以提供一些自动提示、集成调试等功能,缺点是程序比较庞大笨重。后者则轻量快速直接,但无自动提示等功能。开发者可以根据自身情况合理选择代码编辑工具。
对于开发测试浏览器,推荐使用Google的Chrome。Chrome速度快、对WebGL支持好、调试方便,是WebGL开发者首选浏览器。
在部署测试页面程序时,可以选择用IDE中的内置的调试方法,也可以直接放入如Tomcat等Web服务器中并用浏览器直接访问。
Chrome浏览器提供了内置的调试工具,非常方便。可以直接按F12打开开发工具窗口,其中提供了控制台、查看页面元素、断点跟踪、性能测试等功能(见下图)。
更多关于Chrome开发工具的功能介绍,请参考Google官方文档:https://developers.google.com/chrome-developer-tools/
坐标系统
在mono中,3D场景的坐标是一个空间直角坐标系。直角坐标系是指在原点O,做三条互相垂直的数轴,它们都以O为原点,分别叫做x轴(横轴)、y轴(纵轴)、z轴(竖轴),统称坐标轴。在mono中,坐标系方向遵循右手法则,即以右手拇指、食指、中指相互交叉,拇指指向x轴正方向,食指指向y轴正方向,则中指指向的即是z轴正方向。
在3D中,空间的一个点由(x, y, z)三个数值组成。下图展示了不同数值其具体表示的点的位置。熟练掌握坐标点的位置,对mono开发具有重要的作用。
此外,mono中还有世界坐标系和本地坐标系之分。世界坐标系是指所有3D物体所在的空间的大坐标系,而本地坐标系则是指以某一物体自己位置为原点的局部坐标系。例如一个飞速行走中的汽车,汽车的位置信息可以通过世界坐标系来定义其在地面空间的位置,而汽车内部的某个点则可以通过汽车的本地坐标系进行指定,而它和汽车本身的位置、旋转角度无关。
角度单位
在mono中,所有的角度数值都统一用弧度表示。即:Math.PI表示180度。例如:node.setRotation(Math.PI, Math.PI/2, Math.PI);
3D对象种类
Mono中,3D场景中的物体都是由各种3D基本形状的物体组成的。例如立方体、球体、圆柱体等等。这些最基本形状的物体由mono直接提供,它们可以通过进一步组合、运算等,形成现实世界中更复杂的物体。所以,mono开发中首先需要了解基本3D物体的种类和其特性。
目前,mono支持的基本3D物体有:
- mono.Cube:立方体。由6个面组成的立方体是最常见的3D物体。典型用法:设备、机架、仪表等
- mono.Sphere:球体。球体表面是一个曲面,由长宽高控制其尺寸。其曲面是由一系列纵向+横向均匀切分的小平面拼接而成,圆滑度取决于切分横向和纵向的分片数量,数量越大曲面越圆滑但性能越低。典型用法:灯泡、球形装饰物等
- mono.Cylinder:圆柱体。圆柱体表面是一个纵向直线、横向圆形的曲面组成,由长宽高控制其尺寸,还可设置顶面和底面是否封闭。需要留意的是,圆柱的顶面和底面的尺寸可以不同。侧面圆滑度由分片数量进行控制,分片数量越大侧面越圆滑但性能越低。圆柱可以有一些特别用法:圆锥(顶面半径为0)、金字塔形状(顶面半径0、侧面分片为4)、半金字塔形状(顶面半径为底面半径的一半、侧面分片为4)等等。可以通过灵活设置上下面的半径、侧面分片数量,来创建很多变种的圆柱体。典型用法:建筑物支撑柱、各种圆柱形物体
- mono.Torus:圆环。圆环是一个类似“手镯”形状的圆环物体。它的切面和形状都是圆形,其圆滑度都可通过切片数量进行控制。此外,圆环还可以通过角度控制其是否封闭。360度的圆环是一个封闭的圆环,而180度的圆环则是一个被切去一半的半个圆环残体。如果将切面切片和环形切片都设置成3,则会形成一个类似三角管体组成的三角形形状体。典型用法:弧形门把手、弯管连接头体、各种圆环形状体等
- mono.PathNode:路径体。这是一种复杂的形状体,由两个任意形状进行控制:切面形状,以及前进走向。最终形状是该切面形状沿着前进path走向进行移动而形成的物体。例如,一个圆形切面沿着一个多边形移动,就会形成一个复杂的管线物体。这种形状还可以控制两个端头是否封闭、封闭的形状和尺寸,横切方向是否闭合、闭合角度、闭合样式等。通过控制这些参数,可以创建例如管线、弯管、香肠体、切开的管线等。典型用法:管线
- mono.TextNode:文字。将一串文字进行建模并形成一个复杂的3D物体。文字在3D中并没有直接的支持方式,所以和其他复杂形状一样,需要给出其具体的形状然后进行切片、分片来模拟。由于3D中没有直接的字体数据,需要额外提供字体的具体形状。在mono中没有内置任何字体信息,需要开发者额外去创建并引入到程序中。在MONO Design编辑器中,提供了几种英文字体形状信息,存储在类似“***_regular.typeface.js”的js文件中。例如,“helvetiker_regular.typeface.js”文件中存储了helvetiker字体的正常体信息,“helvetiker_bold.typeface.js”文件中存储了helvetiker字体的粗体信息,等等。如需要更多的字体,可以到网站http://typeface.neocracy.org/在线提交、生成和下载。一般一个英文字体对应的js文件大约在数百kb左右。由于中文字体形状复杂、字符数量巨大,一般不建议使用中文字符。典型用法:各种文字标识、设备标签
- mono.ShapeNode:形状块。一个任意Shape形状加厚度形成的实心物体。典型用法:地板、3D地图块图等
- mono.PathCube:路径方块。它的纵切面是一个矩形,并沿着一个路径方向进行建模。常见用法:房间的墙体等
- mono.Particle:粒子系统。一个粒子系统是一个特别的3D物体,它由很多内部的点组成,每个点有一个贴图。通过控制点的数量和位置,可以实现一种复杂运动的粒子效果。例如:模拟烟雾、火焰、喷水等。典型用法:设备烟雾、火焰、液体喷射物等
- mono.CSG:运算组合体。运算组合体是由多个3D物体进行组合运算得出的物体。例如立方体A合并球体B、球体A减掉圆柱体B。通过多次运算,可以创建以上3D物体无法实现的复杂物体。典型用法:现实世界中各种复杂不规则物体
- mono.Billboard:公告牌。公告牌是一种特殊的3D物体,它只有一个图片组成,而且这张图片会永远朝前面向镜头(也就是我们用户的眼睛),而无论场景如何变化。在游戏软件场景中,经常会有这样的场景:一个移动的物体(人、机器等)会在上方显示一个图片,图片上显示了文字、状态信息等,这个图片会永远朝向用户的眼睛,而无论物体如何移动。Billboard的这一特性使得它非常合适制作3D场景中的各种信息展示、文字说明、提示警告等。典型用法:设备告警、设备状态信息等
此外,mono还会持续的增加更多的基本3D物体。3D物体通过进一步的组合,可以形成更复杂的形状,更逼真的模拟现实世界中的各种物体。
通用对象属性
所有的3D物体都从mono.Element->mono.Node方向进行继承,所以它们有很多共同的基本属性。
常见的有:
位置、角度、比例
每一个3D对象都有空间位置、角度、比例属性。
- position:物体位置信息,通过get/set方法操作。默认位置为(0, 0, 0)。不同物体自身的原点位置略有差异,一般而言都是在物体的自身的中心点。例如立方体的原点在自己内部中心点。所以,当新建一个立方体并设置坐标为(0, 0, 0)时,立方体将有一半在水平坐标下方。用法举例:node.setPosition(100, 200, 300)
- rotation:物体在x、y、z轴向的旋转角度,通过get/set方法操作。默认值为(0, 0, 0)。例如,node.setRotation(0, Math.PI, 0)表示node在y轴方向旋转180度
- scale:物体在x、y、z轴方向的缩放比例,通过get/set方法操作。默认值为(1, 1, 1)。例如,node.setScale(1, 2, 1)表示node在y轴方向上放大到2倍。此时node的高度会变大(但是通过getHeight()获取的高度值height并未改变,仅仅是高度的比例增加了一倍)
Style样式
每个对象都有很多的样式属性,定义了它的外观、材质、颜色等等参数信息。mono中支持两种属性设置方法,一是通过setStyle/getStyle和一个key值方法进行存取。例如:node.setStyle(‘m.color’, ‘red’)。二是使用CSS样式的设置方法,例如: node.s({‘m.color’ : ‘#FF6666′,’m.wireframe’ : true});最常用的style是和材质相关的一些属性,这些属性都以’m.’前缀开头。以下列出了常用的一些style。
m.texture.image
材质贴图图片url。例如:node.setStyle(‘m.texture.image’,’../images/default_texture.png’)。
m.type
材质的类型。可选’basic’或’phong’。其中,basic不支持光照效果,但效率高;phong支持光照效果,效率略低。
m.color
材质的染色,默认值为空。设置后,可以将物体以指定的颜色进行渲染。如果指定了贴图,则会用该颜色将贴图重新“染色”。注意:为了获得更透彻的染色效果,应同时设置’m.ambient’属性。
m.ambient
材质的光照反射颜色,默认为空。当未设置时,材质将用自然颜色反射环境光。例如,将此属性设置为绿色,则该物体将会反射出绿色的环境光。注意:为了获得更透彻的染色效果,应同时设置’m.color’属性。
下图是同时设置了m.color和m.ambient后展示的染色效果:
m.texture.repeat
材质的纹理重复次数,类型为mono.Vec2。默认情况下,贴图会在物体表面上进行横向和纵向的100%拉伸贴图显示。而设置了这一属性后,可以指定在横向和纵向上按照指定次数进行“重复”性的纹理绘制。例如,墙面、地板等物体,都可以通过这种方法对一张小图进行重复纹理。举例:node.setStyle(‘m.texture.repeat’,new mono.Vec2(10, 5))可将贴图在横向和纵向分别重复10次和5次。注意:当使用本方法启用纹理贴图时,贴图图片的宽和高的尺寸规格必须为像素数为2^n(2的n次方,例如32、64、128、256、512、1024….)的数字,例如128×128或32×64的png图片。否则纹理会显示不正常。
m.specularStrength
物体材质的镜面反射强度。当一个物体有一定的镜面反射效果时(例如半透明的玻璃、光亮的金属表面),可适当设置这一数值。数值越大,产生的镜面反射效果越强烈。对于一些无镜面反射的表面(例如水泥、木材等粗糙表面),应避免设置这一属性。
m.side
设置贴图为内面贴图、外面贴图还是双面贴图。默认为外面贴图。可选值为:mono.FrontSide外面贴图、mono.BackSide内面贴图、mono.DoubleSide双面贴图,双面贴图会在内,外两面都贴上图,会消耗更长的时间,如果3D对象不需要显示内外两面,可不设置为双面贴图。
m.wireframe
设置3D物体为线框类型,例如:node.setStyle(‘m.wireframe’,true);
其他通用属性
所有3D对象还有很多其他通用属性,以下列出一些常见部分:
- setSelectable(selectable) – 是否对象可以鼠标点击选中
综合演示
以下代码综合演示了如何为对象设置一些常见属性:
var node = new mono.Node(); node.setPosition(10,10,10); node.setRotation(Math.PI,0,0); node.setScale(2,2,2); node.setStyle('m.texture.image',pic); node.setStyle('m.type','basic'); node.setStyle('m.side', TGL.DoubleSide);
使用基础工具类
在开发之前,开发者可以先熟悉一下mono中提供的一些很实用的基础类。这些类提供了一些基础的数学运算和数据操作方法,在以后使用时可以查阅。
mono.js中提供的基础类介绍
- mono.Utils.createElement(element1,element2,material,materialIndexOffset) 在element1和element2的基础上创建1个新的Element对象
- mono.Utils.mergeElement(element1, element2, materialIndexOffset) 把element2合并到element1
- mono.Utils.autoAdjustNetworkBounds(network, o, w, h, left, top) 调整Network的Bounds
- mono.Utils.validateLicense(license) 验证license信息
- mono.Utils.isSame(element1,element2) 判断两个对象是否为同一对象
- mon.Mat3(n11, n12, n13, n21, n22, n23, n31, n32, n33) 3 x 3 矩阵
- mon.Mat4(n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) 4 x 4矩阵
- mono.Vec2(x,y)二维向量
- mono.Vec3(x,y,z)三维向量
mono_toolkits.js提供的基础类介绍
mono_toolkits.js中的基础类为开发者提供了便捷操作3D对象,管理3D场景,以及应用3D特效的函数和对象:
- mono.Toolkits.loadTemplate(network3D, name, key, cloudURL, isAppend)远程加载存放在图纸服务器上的设计图纸数据,并展现在指定的3D场景中。加载图纸的时候需要应用mono团队提供的mono_template.js库文件
- mono.Toolkits.loadGraph(box3D,graphContents,isAppend)加载指定的图纸内容。加载图纸的时候需要应用MONO团队提供的mono_template.js库文件
- TemperatureBoard.addPoint(x,y,value)向云图组件注入采样数据
- TemperatureBoard.getTemperatureBoard()获得将采样点数据渲染为云图后的mono.Plane对象
- TemperatureBoard.getImage()获得采样点数据渲染为云图后的图片数据。可以直接用于Image对象的src属性
- LEDDisplay.display(value)显示指定的数字
- LEDDisplay.getView()获得LED数字模式组件的DOM对象