基于html5 canvas的引擎,基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统

前言

你们好，老郑我又回来了。这一期为你们带来一个很是好玩的 demo，咱们制做一套本身的 3D 管道控制系统，运用了( http://www.hightopo.com )HT 的 Graph3dView 组件经过对 WebGL 底层技术的封装，与 HT 其余组件同样，基于 HT 统一的 DataModel 数据模型来驱动图形显示。html

效果图

此为 2D 主界面：node

此为 3D 界面的部分分段演示：浏览器

因为 gif 上传有大小限制，因此请你们务必去网页感觉和体验，双击进口阀开始。 ( 戳我进入！)网络

代码实现

主要教你们的是一种流程动画的制做方式，我用到包括动画在内的多种方法，下面我听我慢慢道来。因为是 3D 界面，关于建立 3D 渲染引擎组件，可视化呈现数据模型的三维环境场景我以前有讲过，就是 dataModel 和 graph3dView。(后面用简写的dm，gv代替)架构

咱们先对总体界面的基础进行一下设置：函数

// 禁止拖动

gv.setMovableFunc(function() { return false})

// 设置眼睛

gv.setEye([-922, 1745, 4659])

// 设置中心点

gv.setCenter([98, 621, -318])

而后，把须要加动画的阀都获取到，咱们按照步骤依次来，以避免落下关键步：动画

var a = dm.getDataByTag('进口电动球阀')

var b = dm.getDataByTag('旁通阀')

var c = dm.getDataByTag('出口电动球阀')

...

...

能够开始咱们的动画设计了！我用的是 flyTo() 的方法，事实证实这种效果然的很不错。咱们要事先准备好全部的动画组并把它们串联在一块儿，我设计的开始演示是经过双击进口阀来控制。好比第一步，应该打开将进口球阀由远程控制转为就地控制。因此，咱们要让镜头从这里开始：spa

gv.mi(function(e) {

if (e.kind === 'doubleClickData') {

if (e.data.getTag() === '进口电动球阀') {

gv.flyTo(n, {

animation : true,

direction : [-200, 0, 0],

distance : 100}) anim1() } } })

注意 mi 是增长交互事件监听器，addInteractorListener 的缩写。设计

// 示例：

gv.mi(function(event) {

// event 格式：

{

kind: 'clickData', // 事件类型

data: data, // 事件相关的数据元素

part: "part", // 事件的区域, icon、label 等

event: e // html 原生事件

}

})

这里面 n 就是第一步的那个按钮，再介绍一下这个方法的相关参数：

flyTo : 相机看向具体的节点或者节点列表，参数 (target, options)，其中

target : 一个节点 node 或者节点列表(Array)或者空(场景内的全部节点)

options : 可选属性，格式为对象({})，属性包括有：

animation : 默认 false，是否启用动画，能够设置为 true 或者 false 或者 animation 动画对象

center : 默认 undefined，新的场景 center 点，形如 [0,0,0](空的话，target 为一个则看向 node 中心，target 为列表则看向根据节点列表计算出来的中心)

direction : 默认 undefined，眼睛处于目标的方向(相对目标，受到目标自身旋转影响)，例如 [0,1,5] 在目标正面的斜向上

worldDirection : 默认 undefined，眼睛处于目标的方向(相对场景，不受目标旋转影响)，例如 [0,1,5] 在目标所在位置的斜向上

distance : 默认undefined(未定义的话则使用下面的 ratio 模式计算距离)，浮点类型，表示眼睛跟中心的固定距离

ratio : 默认 0.8，浮点类型，表示眼睛跟中心的距离动态计算(例如 0.8 表示眼睛在上述方向上动态计算距离以将目标包围盒的 8 个角所有适配到屏幕 80% 范围内)3d

注意，direction跟worldDirection若是都不配置，则使用以前相机的角度保持不变化。

后面所有用到动画，解释一下。在 HT 的数据模型驱动图形组件的设计架构下，动画可理解为将某些属性由起始值逐渐变到目标值的过程， HT 提供了 ht.Default.startAnim 的动画函数。它支持 Frame-Based 和 Time-Based 两种方式的动画，Frame-Based 方式是用户经过指定 frames 动画帧数，以及 interval 动画帧间隔参数控制动画效果。

我用的是 Time-Based 方式，该方式用户只须要指定 duration 的动画周期的毫秒数便可，HT 将在指定的时间周期内完成动画， 不一样于 Frame-Based 方式有明确固定的帧数，即 action 函数被调用多少次，Time-Based 方式帧数或 action 函数被调用次数取决于系统环境， 通常来讲系统配置更好的机器，更高效的浏览器则调用帧数越多，动画过程更平滑。因为 js 语言没法精确控制 interval 时间间隔， 采用 Frame-Based 不能精确控制动画时间周期，即便相同的 frames 和 interval 参数在不一样的环境，可能会出现动画周期差别较大的问题， 所以 HT 默认采用 Time-Based 的方式，若是不设置 duration 和 frames 参数，则 duration 参数将被系统自动设置为 ht.Default.animDuration 值。action 函数就是实现动画过程当中的属性变化(变化参数和进度)。

紧接着咱们要开始执行第一个动画—— anim1() 了：

functionanim1() {

ht.Default.startAnim({

duration: 2000,

action: function(v, t) {

// 让旋钮旋转，改变其角度 r3

n.r3(n.r3()[0] - 0.02, n.r3()[1], n.r3()[2])

},

finishFunc: function () { // 动画结束后调用的函数

gv.flyTo(a, {

animation : true, direction : [-2000, 1000, 2000], distance : 1000}) anim2() } }) }

...

能够看到动画结束后咱们再次用到 flyTo() 向下一个步骤开关去拉近，而后再次执行它的动画，以此类推，关于一套清晰的操做流程的动画实现指日可待！

当全部步骤结束后咱们应当将镜头拉回到最开始时的初始视角，因此咱们要注意一点，在最开始的时候提早把位置复制一下：

var oEye =ht.Default.clone(gv.getEye())

var oCenter = ht.Default.clone(gv.getCenter())

这样，在最后一个 finishiFunc 中咱们还原位置：

gv.setEye(oEye)

gv.setCenter(oCenter)

最后，一个简明的系统操做流程就作好了，想看不懂都难~

总结

HT For Web 提供完整的基于 HTML5 图形界面组件库。您能够轻松构建现代化的，跨桌面和移动终端的企业应用，无需担心跨平台兼容性，及触屏手势交互等棘手问题。也可用于快速建立和部署，高度可定制化，并具备强大交互功能的拓扑图形及表盘图表等应用。HT for Web 很是适用于实时监控系统的界面呈现，普遍应用于电信网络拓扑和设备管理，以及电力、燃气等工业自动化 ( HMI / SCADA ) 领域。