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

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

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

透过WebGL 3D看动画Easing函数本质》这篇介绍的基于

该例子主要应用了ht.Shape类型对象，该对象在

整个例子我们仅仅用了上图的一个箭头图片，通过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’可动态改变箭头图片的渲染颜色，这样无需美工提供多种图片，我们甚至可以根据温度值等指标动态改变箭头颜色。

该例子左下角摆放了OVM(Object-View mapping)设计模式带来的好处：

以下是段操作HT for Web中管理员在2009年8月13日编辑了该文章文章。