HT for Web中3D流动效果的实现与应用

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

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

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

该例子主要应用了ht.Shape类型对象,该对象在ht.graph.GraphView中呈现了多边形的效果,而该模型在ht.graph3d.Graph3dView中则常用于绘制墙面、管道等三维模型对象,在《HT for Web 3D手册》中有如下的例子,其实已经体现了ht.Shape可作为墙面和管道并且可以贴图的效果,我们只需要动态改变uvOffset参数即可让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)设计模式带来的好处:

以下是段操作HT for Web3D流动例子的视频供参考,基于HT预定义的模型还有很多自定义效果,大家可以发挥想象力让3D的流动效果发挥出更多不可思议的应用场景效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

Metal入门教程(五)视频渲染

Metal入门教程(一)图片绘制 Metal入门教程(二)三维变换 Metal入门教程(三)摄像头采集渲染 Metal入门教程(四)灰度计算

3714
来自专栏hightopo

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

1204
来自专栏HT

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

http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html ...

1959
来自专栏大数据文摘

五个创建交互式图表的Python库

1886
来自专栏华章科技

数据分析图的十大错误,你占了几个?

优秀的数据可视化依赖优异的设计,并非仅仅选择正确的图表模板那么简单。全在于以一种更加有助于理解和引导的方式去表达信息,尽可能减轻用户获取信息的成本。当然并非所有...

601
来自专栏hightopo

原 HT for Web中3D流动效果的实

1543
来自专栏Sign

web版《合成10》代码分享

变成月更了。 想做的事情很多,继续扩展『格斗节奏』,把『小红帽』文字冒险游戏成立一个童话系列,优化『月千之夜』和『破壳曼』,上线『Boo』。继续完成各个漫画系列...

3106
来自专栏天天P图攻城狮

例说 Constraint Layout(三)—— 性能测评

在各种页面设计下,提升有多有少,但 CL 的性能确实是最佳的!

2153
来自专栏数据小魔方

R语言学习笔记——柱形图

今天分享R语言中的柱形图,所有图表语法都基于ggplot2包中的ggplot函数完成 。 其实R语言本身就带有各种作图函数,比如plot、bar、pie等,而且...

42613
来自专栏iOSDevLog

ARKit介绍

Apple在WWDC17上宣布了一个名为ARKit的新iOS框架。它是一个“允许您轻松为iPhone和iPad创建无与伦比的增强现实体验”的框架。该框架随iOS...

682

扫码关注云+社区