共计 2715 个字符，预计需要花费 7 分钟才能阅读完成。
前言
我国是一个陆地大国，领有漫长的海岸线、辽阔的管辖海域和丰盛的海洋资源。党的十九大报告明确提出：“保持陆海兼顾，放慢建设陆地强国”。从陆地大国到陆地强国，合乎我国倒退法则、世界倒退潮流，是实现中华民族平凡振兴“中国梦”的必然选择。
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰盛，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依靠于丰盛的陆地风能资源，放慢海上风电我的项目的建设和倒退，对减速沿海地区的能源转型，推动中央经济倒退，晋升沿海地区的生态环境，推动风电技术停顿和产业降级，促成能源结构调整具备重要的意义。因而，海上风力发电场应运而生。
介于 2D 组态和 3D 组态上，Hightopo（以下简称 HT）的 HT for Web 产品领有丰盛的组态化可供选择。文章将介绍如何使用 HT 丰盛的 2D/3D 组态搭建出一个海上风力发电场的解决方案，心愿可能抛砖引玉，给大家带来更多海上风电场的思考和探讨。
界面简介及成果总览
Demo 主页面中展现了海上风电场的根本形成，包含肯定规模数量的风电机组, 输电零碎和升压台。风电机组有序排放，叶片随风向和风速不停转动，将陆地上丰盛的风的动能通过一系列转换，转化为贵重的电能输入；每个风电机节点产生的电能通过输电零碎源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
点击风机叶片，能够进入叶片的微观世界，以宏观视角看风机的详细信息，包含风机参数，环境参数，发电信息和故障信息等。场景的搭建采纳 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎实现，其中的动画和人机交互也是基于自主研发的组件，依靠于 JavaScript 和 HTML5 实现。
实现过程
场景加载
在后面局部，文章提到本案例的场景都是通过自主研发的渲染引擎实现，那么搭建好的场景如何通过代码加载，出现给用户呢？在 HT 中，咱们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 别离来出现 2D 和 3D 场景，而后通过反序列化实现场景的加载。
收场动画
本案例的收场动画绝对比较简单，动画的外围机制是应用了 HT 外部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。ht.Default.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) 来实现视角的变动。
风电机组：随风而动，将海上风能转化为电能
在海上风电场我的项目中，风电机组的数量都是具备肯定规模的，这些风电机组收集海上丰盛的风能，转化为人类所需的电能。那对于这些肯定规模数量的风电机组，如何保障其运行的流畅性呢？本案例应用了 HT 提供的批量（batch）进步零碎性能。
批量的原理即如果图元一个个独自绘制模型时性能较差，然而当一批图元聚合成一个大模型进行一次性绘制时，则会极大进步 WebGL 的刷新性能。批量的应用办法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 应用 .s(‘batch’, ‘batchName’) 设置对应的 batch 批量名。流程如图所示：
在本案例中，每个风机模型被分为三局部，标签局部 1，叶片局部 2 和 主体局部 3。在下面图示的 batch 流程中，能够发现只对标签局部 1 和 主体局部 3 利用了 batch 操作，然而没有对主体局部 2 使用 batch。这是因为叶片局部须要随风转动，其属性会产生频繁变动，在 batch 外面的图元尽可能防止频繁的变动，如果属性频繁变动，将可能起到副作用。
风电机的详细信息：进入宏观视角，将风电机的所有尽收眼底
点击每个风电机的叶片，都能关上风电机的具体页面。在此场景中，咱们采纳了科技线框格调来展现风电机的外部架构，绝对于大部分的实景搭建，感官上更为震撼和炫酷。在展现风机内部结构的同时，两侧还展现了该风机四周的环境参数，海上风向风速信息，风机自身的数据监测，发电参数等。点击风电机的某个部位，能够看到以 billboard 款式展现的详细信息。
输电零碎：不辞劳苦，将电能源源不断地输送给升压台
通过风电机转换而来的电能，通过输电零碎源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电零碎是应用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 反对 {x: 10, y: 20, e: 30} 格局的三维空间点形容。ht.polyline 的走向由 points 和 segments 决定。案例中的流动成果是通过应用 setInterval 办法来不停地动静扭转管线的 top.uv.offset 属性来实现。
在本案例中，输电零碎的管道也是数量宏大的，因而也采纳 batch 实现。其流程如图所示：
总结
建设陆地强国，寄托着中华民族向海图强的欲望。人类对陆地的摸索永无止境，全面、精确而粗浅地理解陆地，把握陆地的静止法则，能力为建设陆地强国提供松软的根底。开发陆地，经略陆地，爱护陆地，拓展蓝色经济空间，曾经成为人类生存和社会倒退的趋势。陆地经济，陆地科技未来是一个主攻方向，而海上风力发电场作为陆地强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。咱们也会更加专一于自主产品研发，在力不从心的畛域奉献一份力量。
2019 咱们也更新了数百个工业互联网 2D/3D 可视化案例集，在这里你能发现许多离奇的实例，也能发掘出不一样的工业互联网：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA
同时，你也能够查看更多案例及成果：https://www.hightopo.com/demos/index.html
