基于HTML5 WebGL的3D风机的功能该如何去实现？

　　在如上的项目中使用的风机模型是通过 MAYA 和 MODO 建模制作而成，这两个工具导出的 obj 和 mtl 文件，在 HT 编辑器中可以通过解析这两个文件来生成 3d 场景中的风机部件模型，然后通过 HT 的 3d 编辑器场景搭建完成整体风机场景。
　　在开始操作之前先确认需求，从上面效果图中分析可以看到主要有三个功能需求：
　　1、滚轮滚动时风机外壳透明化到隐藏再到显示效果；
　　2、点击风机内部部件时有对应的弹窗出现以及点击弹窗隐藏；
　　3、风机叶片旋转效果；
　　在明确所需要的交互功能需求后，我们就可以一步一步来实现它。
　　技能储备
　　实现功能
　　1，滚轮滚动时风机外壳透明化到隐藏效果
　　由于该风机场景是由多个子模型拼装形成，所以在加载场景时候存在子模型加载的异步问题，存在的异步问题会导致在获取子模型并对其绑定事件时候发生错误，比如提示该子模型 undefined，所以要先解决这个问题。
　　ht.Default.handleModelLoaded = function （data） { //模型加载完成时回调}
　　通过 handleModelLoaded 解决模型加载异步问题后，就可以在函数内针对模型进行事件绑定操作。
　　首先声明一个数组，是三个模型的 tag 名，通过后面的 for 循环获取这三个模型：
　　//风机三个外壳var fanArr = ［‘风机_叶片’， ‘风机_机箱外壳2’， ‘风机_轮毂外壳’］;
　　然后在 handleModelLoaded 方法的函数内对风机外壳模型进行操作：
　　for （var i = 0; i 《 fanArr.length; i++） { //滚轮控制拉远拉近时风机部件透明化 if （data == ‘models/机械设备/风力发电机/’ + fanArr + ‘.json’） { var model = ht.Default.getShape3dModel（‘models/机械设备/风力发电机/’ + fanArr + ‘.json’）; //通过tag标签名获取模型 var tags = g3d.dm（）.getDataByTag（fanArr）; //绑定滚轮事件 g3d.getView（）.addEventListener（‘mousewheel’， function （e） { //获取eye到center距离 //通过distance判断显示隐藏的滚轮距离 var distance = ht.Default.getDistance（g3d.getEye（）， ［0， 9500， 0］）; if （distance 《 2700 && distance 》 2100） { //拉近机箱外壳透明化 tags.setStyle（‘shape3d.transparent’， true）; tags.setStyle（‘shape3d.opacity’， 0.5）; tags.setStyle（‘shape3d.visible’， true）; //拉远隐藏显示框 for （var j2 = 0; j2 《 eightArr.length; j2++） { var textViews = g3d.dm（）.getDataByTag（eightArr［j2］ + ‘show’）; textViews.setStyle（‘3d.visible’， false）; } } else if （distance 》 2700） { //拉远恢复原状 tags.setStyle（‘shape3d.transparent’， false）; tags.setStyle（‘shape3d.opacity’， 1）; } else if （distance 《 2100） { //拉近隐藏机箱外壳 tags.setStyle（‘shape3d.visible’， false）; } }） }}
　　如此就实现了第一个目标，成功实现滚轮滚动时风机外壳透明化到隐藏效果。
　　然后接着第二个目标。
　　2，点击风机内部部件时有对应的弹窗出现
　　实现该效果无非就是两步走，获取部件模型，然后给模型绑定点击事件（点击显示弹窗，点击弹窗隐藏弹窗）
　　首先声明一个部件数组：
　　//风机内部九大部件var parts = ［‘风机_控制柜’， ‘风机_发电机’， ‘风机_风冷装置’， ‘风机_制动联结装置’， ‘风机_油冷装置’， ‘风机_齿轮箱’， ‘风机_主轴’， ‘风机_转子齿轮’， ‘风机_变桨系统’］;
　　然后代码实现，也是放在 handleModelLoaded 方法的函数内：
　　//九大部件与弹窗绑定点击事件g3d.mi（function （e） { //交互事件监听器 //绑定点击事件 if （e.kind === ‘clickData’） { for （var j = 0; j 《 parts.length; j++） { if （e.data.getTag（） === parts［j］） { for （var j2 = 0; j2 《 parts.length; j2++） { //通过tag标签名获取模型图元 var textViews = g3d.dm（）.getDataByTag（eightArr［j2］ + ‘show’）; textViews.setStyle（‘3d.visible’， false）; } //通过tag标签名获取弹窗图元 var textView = g3d.dm（）.getDataByTag（eightArr［j］ + ‘show’）; textView.setStyle（‘3d.visible’， true）; } //弹窗点击事件 if （e.data.getTag（） === parts［j］ + ‘show’） { var textView2 = g3d.dm（）.getDataByTag（parts［j］ + ‘show’）; textView2.setStyle（‘3d.visible’， false）; } } }}）
　　在实现部件点击显示弹窗和点击弹窗隐藏效果后，就差最后一步，完成风机叶片旋转效果。
　　3，风机叶片旋转效果
　　风机叶片旋转原理非常简单，本质就是控制 rotation 的参数，通过 startAnim 方法递增参数值实现叶片旋转动态效果。
　　还是老路子，先获取风机叶片模型，然后再修改和赋予 rotation 参数值，代码实现也是放在 handleModelLoaded 方法的函数内。
　　//风机叶片旋转if （data == ‘models/机械设备/风力发电机/风机_轮毂外壳.json’） { var rotation = ‘’; var deg = Math.PI / 180; var speed = 2; function animation（） { //获取风机模型 var modelWheel = g3d.dm（）.getDataByTag（‘风机_轮毂外壳’）; ht.Default.startAnim（{ duration： 5500， // 动画周期毫秒数，默认采用 action： function （v， t） { rotation = ［0， 0， deg * （speed--）］; modelWheel.setRotation3d（rotation）; }， finishFunc： function （） { //动画结束后调用 animation（）; } }） } animation（）;}
　　4-完整代码
　　完成三个功能需求后完整核心代码如下所示：
　　//风机三个外壳var fanArr = ［‘风机_叶片’， ‘风机_机箱外壳2’， ‘风机_轮毂外壳’］;//风机内部九大部件var parts = ［‘风机_控制柜’， ‘风机_发电机’， ‘风机_风冷装置’， ‘风机_制动联结装置’， ‘风机_油冷装置’， ‘风机_齿轮箱’， ‘风机_主轴’， ‘风机_转子齿轮’， ‘风机_变桨系统’］;ht.Default.handleModelLoaded = function （data） { //模型加载完成的回调 for （var i = 0; i 《 fanArr.length; i++） { //滚轮控制拉远拉近时风机部件透明化 if （data == ‘models/机械设备/风力发电机/’ + fanArr + ‘.json’） { var model = ht.Default.getShape3dModel（‘models/机械设备/风力发电机/’ + fanArr + ‘.json’）; // console.log（model）; var tags = g3d.dm（）.getDataByTag（fanArr）; g3d.getView（）.addEventListener（‘mousewheel’， function （e） { //获取eye到center距离 var distance = ht.Default.getDistance（g3d.getEye（）， ［0， 9500， 0］）; if （distance 《 2700 && distance 》 2100） { //拉近机箱外壳透明化 tags.setStyle（‘shape3d.transparent’， true）; tags.setStyle（‘shape3d.opacity’， 0.5）; tags.setStyle（‘shape3d.visible’， true）; //拉远隐藏显示框 for （var j2 = 0; j2 《 eightArr.length; j2++） { var textViews = g3d.dm（）.getDataByTag（eightArr［j2］ + ‘show’）; textViews.setStyle（‘3d.visible’， false）; } } else if （distance 》 2700） { //拉远恢复原状 tags.setStyle（‘shape3d.transparent’， false）; tags.setStyle（‘shape3d.opacity’， 1）; } else if （distance 《 2100） { //拉近隐藏机箱外壳 tags.setStyle（‘shape3d.visible’， false）; } }） } } //九大部件与弹窗绑定点击事件 g3d.mi（function （e） { //交互事件监听器 if （e.kind === ‘clickData’） { for （var j = 0; j 《 parts.length; j++） { if （e.data.getTag（） === parts［j］） { for （var j2 = 0; j2 《 parts.length; j2++） { var textViews = g3d.dm（）.getDataByTag（eightArr［j2］ + ‘show’）; textViews.setStyle（‘3d.visible’， false）; } var textView = g3d.dm（）.getDataByTag（eightArr［j］ + ‘show’）; textView.setStyle（‘3d.visible’， true）; } //弹窗点击事件 if （e.data.getTag（） === eightArr［j］ + ‘show’） { var textView2 = g3d.dm（）.getDataByTag（eightArr［j］ + ‘show’）; textView2.setStyle（‘3d.visible’， false）; } } } }） //风机叶片旋转 if （data == ‘models/机械设备/风力发电机/风机_轮毂外壳.json’） { var rotation = ‘’; var deg = Math.PI / 180; var speed = 2; function animation（） { //获取风机模型 var modelWheel = g3d.dm（）.getDataByTag（‘风机_轮毂外壳’）; ht.Default.startAnim（{ duration： 5500， // 动画周期毫秒数，默认采用 action： function （v， t） { rotation = ［0， 0， deg * （speed--）］; modelWheel.setRotation3d（rotation）; }， finishFunc： function （） { //动画结束后调用 animation（）; } }） } animation（）; }}
　　结束语
　　这个风机 demo 功能的实现整体原理很简单，万变不离其宗，最终都是获取对象然后绑定事件实现效果。再复杂的功能通过解析后发现最终也不过是一个又一个简单小功能组合到一起最后实现大的功能。