风能，作为取之不尽，用之不竭的可再生资源，非常适合用来发电。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
工具/原料
任意型号任意型号
Windows7/1064位操作系统任意型号
HTforWeb编辑器任意型号
界面简介及效果总览
1、介于2D组态和3D咯悝滩镞组态上，Hightopo（以下简称HT）的HTforWeb产品拥有丰富的组态化可供选择。Demo主页面中展示了海上风电场鹚兢尖睁的基本构成，包括一定规模数量的风电机组,输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
2、点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用HT自主研发的基于HTML5的2D/3D渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于JavaScript和HTML5完成。
实现过程
1、场景加载在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在HT中，我们通过ht.graph.GraphView和ht.graph.Graph3DView分别来呈现2D和3D场景，然后通过反序列化完成场景的加载。
2、开场动画本案例的开场动画相对比较简单，动画的核心机制是使用了HT内憧钏荭拜部封装的动画函数ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。ht.D髫潋啜缅efault.starAnim()支持Frame-Based和Time-Based两种方式的动画，Frame-Based的方式是用户通过指定frames动画帧数，以及interval动画帧间隔参数来控制动画效果，而Time-Based的方式是用户只需要指定duration的动画周期的毫秒数即可，HT将在指定的时间周期内完成动画；还设定了delay动画延迟执行的时间来搭配动画实现的效果；easing参数则是用于让用户自定义函数，通过数学公式控制动画，如匀速变化、先慢后快等效果；action函数的第一个参数v代表通过easing(t)函数运算后的值，t代表当前动画进行的进度[0,1]，一般属性变化根据v参数进行。finishFunc参数代表动画结束后的动作。action函数和finishFunc动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。本案例的开场动画通过设置起始和终止视角的位置，在一定周期内，使用setEye(eye)来完成视角的变化。
3、风电机组：在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了HT提供的批量（batch）提高系统性能。
4、批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高WebGL的刷新性能。批量的使用方法是先通过ht.Default.setBatchInfo函数全局注册批量，再对Data使用.s('batch','batchName')设置对应的batch批量名。流程如图所示：
5、每个风机模型被分为三部分，标签部分1，叶片部分2和主体部分3。在上面图示的batch流程中，可以发现只对标签部分1和主体部分3应用了batch操作，但是没有对主体部分2运用batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在batch里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
6、风电机的详细信息：点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以billboard样式展示的详细信息。
7、输电系统:经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，跗柿椁焚如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线茑霁酌绡ht.polyline实现的，ht.polyline继承与ht.shape,支持{x:10,y:20,e:30}格式的三维空间点描述。ht.polyline的走向由points和segments决定。案例中的流动效果是通过使用setInterval方法来不停地动态改变管线的top.uv.offset属性来实现。