使用 web3D 技术的风力发电场展示

前言

   风能是一种开发中的洁净能源，它取之不尽、用之不竭。当然，建风力发电场首先应考虑气象条件和社会自然条件。近年来，我国海上和陆上风电发展迅猛。海水、陆地为我们的风力发电提供了很好地质保障。正是这些场地为我们的风力提供了用之不竭的能源。现在我们正在努力探索这些领域。

本文章实现了风力发电场的整体流程。能让大家能够看到一套完整风力发电预览体系。

需要注意的是，本次项目是使用 Hightopo 的  HT for Web  产品来搭建的。

预览地址：https://hightopo.com/demo/wind-power-station/

大致流程

 下面是整个项目的流程图。我们从首页可以进入到场区分布页面和集控页面。

  场区分布页面又包括两个不同的 3D 场景，分别是陆地风机场和海上风机场。点击两个 3D 风机场最终都会进入到 3D 风机场景。

预览效果

首页:

1. 世界地图效果

2. 中国地图效果

2. 城市地图效果

 集控中心页面（没有动画效果）：

场区分布页面（没有动画效果）：

陆地风机场： 

海上风机场：

代码实现

 我们可以看到，首页的地球有三种视角状态，世界地图、中国地图、城市地图。点击每个状态相机就会转到对应的位置。在这之前我们要先预先存一下对应的 center 和 eye 。

 我们最好新建一个 data.js 文件，专门用来提供数据。

 相关伪代码如下：

// 记录位置
var cameraLocations = {
    earth: {
        eye: [-73, 448, 2225],
        center: [0, 0, 0]
    },

    china: {
        eye: [-91, 476, 916], center: [0, 0, 0] }, tsankiang: { eye: [35, 241, 593], center: [0, 0, 0] } }

 好了，有了数据之后。我们接下来该监听事件了。我们可以点击按钮，也可以点击高亮区域（世界地图只有按钮可以点击）进入到中国地图视角。

 我们可以这样先获取这两个节点，然后对它们的点击事件进行相同的处理。但是，我觉得这种方式可以进行优化，更换一种思考方式。

 我们可以先将事件进行过滤，我们创建两个数组，一个保存着类似 click、onEnter 这样可以执行的事件，一个保存着所有可以触发事件的节点。这样可以有利于我们维护，也可以使结构更加清晰。

 下图，我们可以看到，如果当前节点没有事件权限或者当前事件本身就没有权限的话，就会被过滤掉。如果都可以正确返回，则执行对应的事件。

 相关伪代码如