HTML5技术

无插件纯Web HTML5 3D机房 终结篇(新增资产管理、动环监控等内容) - twaver(3)

字号+ 作者:H5之家 来源:博客园 2015-10-27 11:47 我要评论( )

安防的另一个重要部分就是门禁系统,通常门禁设备的厂家会自带管理系统,我们只需要把系统数据接进平台即可。在3D呈现上,我们可以把门禁的位置展示出来: 双击门禁控制器后,显示人员的进出信息: 三维拖拽功能 很

安防的另一个重要部分就是门禁系统,通常门禁设备的厂家会自带管理系统,我们只需要把系统数据接进平台即可。在3D呈现上,我们可以把门禁的位置展示出来:

这里写图片描述

双击门禁控制器后,显示人员的进出信息:

这里写图片描述

三维拖拽功能

很多拿到程序的朋友留言问如何能够直接在界面上拖拽移动机柜何设备。通过api移动物体并不复杂,object.setPosition(x,y,z)就行了。不过在界面上如果在3d中直接通过鼠标拖拽就要考虑如何操作方便。点击这个按钮,可以切换到编辑模式,此时可以直接在界面上移动机柜位置。

这里写图片描述

编辑模式下,鼠标点击可以选中一个机柜。同时机柜会出现3个扇形和3个箭头。点中任意扇形拖拽,可以在所在的平面上平移;点击任意箭头拖拽,可以在这个轴向上平移。同时为了能看清坐标数值,在鼠标的tip中显示了当前x、y、z的数值,以及旋转、缩放比例的数值。如下图:

这里写图片描述

当然在这里,机柜只能允许在水平面平移,纵向平移没有什么实际意义,这都可以通过代码进行控制。下面的代码可以控制是否允许拖拽、是否允许缩放、旋转等操作:

var editInteraction = new mono.EditInteraction(network); editInteraction.setShowHelpers(true); editInteraction.setScaleable(false); editInteraction.setRotateable(false); editInteraction.setTranslateable(true);

这样,我们就可以很任性的对机房进行自定义布局了,很多家装设计的工具也是这样的原理。

其他

以上是这次大更新的主要内容,根据项目的需求,程序还做了其他很多小改进,具体大家可以自己看看。包括连线显示实时流量信息(如下图:)

这里写图片描述

动画显示机柜设备的加载过程:

这里写图片描述

更多细节改进就不再赘述,感兴趣的同学可以留言或发邮件到tw-service at servasoft dot com,欢迎一起探讨!如果大家想看到什么更多的效果也可以给我留言。时间有限,很多细节没办法写的很详细,请大家包涵。

posted @

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评