转载

基于HTML5实现3D监控应用流动效果

http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 基于HTML5实现3D监控应用流动效果

流动效果在3D领域有着广泛的应用场景，如上图中医学领域可通过3D的流动直观的观察人体血液的流动，燃气领域可用于监控管道内流动的液体或气体的流向、流速和温度等指标。

基于HTML5实现3D监控应用流动效果

如今企业数据中心机房普遍面临着设备散热的问题，采用冷热通道方案可大大提高数据中心的散热能力，充分有效利用机柜和机房的空间，因此在电信的3D机房监控领域，也常需要借助流动的效果，对机房冷热通道系统进行监控。

基于HTML5实现3D监控应用流动效果

Hightopo 的 HT for Web 作为3D客户端呈现解决方案，今天介绍的重点不在于采集这些指标，而在于如何应用HT的预定于3D元素来实现流动的效果。在《透过WebGL 3D看动画Easing函数本质》这篇介绍的基于 HT for Web 的动画，是通过改变模型的位置方向来实现动画，而本文要介绍的方案则是保持模型位置方向不动，而是通过控制模型的贴图参数uvScale和uvOffset实现流动的控制，这样实现的好处是没有增加过多的3D图元模型，同时可借助2D的图片融合到3D进行呈现，毕竟美工改变2D图片，或程序员内存中动态改变2D图片，都会比动态改变3D模型来的容易且轻量。

基于HTML5实现3D监控应用流动效果

该例子主要应用了ht.Shape类型对象，该对象在 ht.graph.GraphView 中呈现了多边形的效果，而该模型在 ht.graph3d.Graph3dView 中则常用于绘制墙面、管道等三维模型对象，在《 HT for Web 3D手册》中有如下的例子，其实已经体现了ht.Shape可作为墙面和管道并且可以贴图的效果，我们只需要动态改变uvOffset参数即可让3D物体流动起来。

基于HTML5实现3D监控应用流动效果

整个例子我们仅仅用了上图的一个箭头图片，通过uvScale可设置平铺的效果，通过设置’front.uv’: [0,1, 1,1, 1,0, 0,0]我们可以改变箭头的方向，最后实现动画仅仅是这样一行代码offset = 0;setInterval(function(){offset += 0.1;shape.s(‘front.uv.offset’, [offset, 0]});}, 100);你可以再修改动画间隔，或者offset每次步进，这样就可以控制流动的快慢，同时我们通过改变’shape3d.blend’: ‘red’可动态改变箭头图片的渲染颜色，这样无需美工提供多种图片，我们甚至可以根据温度值等指标动态改变箭头颜色。

该例子左下角摆放了 ht.graph.GraphView 的2D拓扑图，2D和3D共同绑定 ht.DataModel 的数据模型，因此可随意操作2D拓扑或3D引擎上的图形组件，你会发现他们会自动联动，任何一处的改变会同时在另一个组件上实时呈现改变效果，这也是HT所有组件可绑定同一数据模型的 OVM(Object-View mapping) 设计模式带来的好处：

基于HTML5实现3D监控应用流动效果