基于 H5与WebGL 的科幻风机 3D 展示

graphView.deserialize(‘displays/demo/风力发电机/风力发电机结构查看.json‘, function (json, dm, gv, datas) {

　　if (json.title) document.title = json.title
        if (json.a[‘json.background‘]) {
            var bgJSON = json.a[‘json.background‘]
            if (bgJSON.indexOf(‘displays‘) === 0) {
                var bgGv = new ht.graph.GraphView()
                bgGv.deserialize(bgJSON)
                bgGv.addToDOM()
                graphView.addToDOM(bgGv.getView())
            }
            else if (bgJSON.indexOf(‘scenes‘) === 0) {
                var bgG3d = new ht.graph3d.Graph3dView()
                bgG3d.deserialize(bgJSON)
                bgG3d.addToDOM()
                graphView.addToDOM(bgG3d.getView())
            }
            graphView.handleScroll = function () { }
        }

 })

// 模拟风速
mockWindSpeed() {
　　return 8 + Math.random() * 12
}

// 指针和扇叶旋转的角度 进行变化
var oldPointerValue = pitchSystem.a(‘pointer‘) || 0

// 风机扇叶和变桨系统的旋转角度
var newRotateAngular = (this.windSpeed - 8) * 7.5 * translateAngularRadian.radian
var addPointerValue = newRotateAngular - oldPointerValue

var oldWindSpeedClip = environmentalData.a(‘windSpeedClip‘) || 0
var newWindSpeedClip = (this.windSpeed - 8) / 12
var addWindSpeedClip = newWindSpeedClip - oldWindSpeedClip

var anim = {
　　duration: 1e3,
　　easing: (v) => {
　　　　return v * v
   },
　　action: (v) => {
　　　　var windSpeed = Number(this.windSpeed.toFixed(2))
　　　　var Max = Number(MaxValue.toFixed(2))
　　　　var average = Number(Aver.toFixed(2))
　　　　var windSpeedClip = oldWindSpeedClip + (addWindSpeedClip * v)
　　　　// 设置发电参数随机数据
   　　generator.a({ windSpeed })
　　　　// 设置环境监测随机数据
　　　　environmentalData.a({ windSpeed, windSpeedClip })
　　　　// 设置统计参数随机数据
　　　　statisticalParam.a({ average, Max, windSpeed })
　　　　// 设置变航系统的指针角度
　　　　pitchSystem.a(‘pointer‘, oldPointerValue + (addPointerValue * v))
　　}
}

ht.Default.startAnim(anim)

var checkInternals = () => {
　　/**
 　　* 故障信息
 　　* 变桨系统 主轴 偏航系统 齿轮箱 油冷装置 发电机 风冷装置
 　　*/
    var FailureStatus = {
        // 正常状态
        status1: new Map([
            [0, [‘舱内温度正常，变桨角度正常。‘, ‘i10‘]],
            [1, [‘舱内温度正常，主轴转速正常。‘, ‘i9‘]],
            [2, [‘偏航系统精确。‘, ‘i8‘]],
            [3, [‘齿轮箱温度正常。‘, ‘i1‘]],
            [4, [‘油冷装置温控表正常。‘, ‘i3‘]],
            [5, [‘发电机功率正常。‘, ‘i5‘]],
            [6, [‘风冷装置正常。‘, ‘i2‘]]
        ]),

        // 异常状态
        status2: new Map([
            [0, [‘变桨角度异常。‘, ‘i10‘]],
            [1, [‘主轴转速偏高。‘, ‘i9‘]],
            [2, [‘偏航系统出现偏移。‘, ‘i8‘]],
            [3, [‘齿轮箱温度偏高。‘, ‘i1‘]],
            [4, [‘油冷装置内积尘过多。‘, ‘i3‘]],
            [5, [‘发电机电流过大。‘, ‘i5‘]],
            [6, [‘风冷装置散热不足。‘, ‘i2‘]]
        ]),
    }

    // 返回设备正常的状况 status 1: 正常 2: 不正常
    var mockQquipmentFailure = (status) => {
        var { rangeRandom } = common
        var index = rangeRandom(7)

        // 返回随机出来的设备情况
        return FailureStatus[`status${status}`].get(index)
    }

      var info = randomInfo[0]
      var targetTag = randomInfo[1]

      this.tableArr = table.a(‘ht.dataSource‘)
      var currentTimeFormat = DateUtil.formatHourTime(new Date())

  // 默认是正常 如果找到故障关键字的话 赋值为 异常
  var status = ‘normal‘
  var time = 0
　this.tableArr.push({ status, info, time: currentTimeFormat })
}

/**
  * 随机偏航系统
  * @param { * }
  */
  randomYawSystem() {
  　　var { dm } = this
  　　var { d2d } = window
  　　var { rangeRandom } = common

  　　var poll = () => {
     　　// 随机数 30 - 50
      　　var random = 30 + rangeRandom(20)
      　　var cabin = dm.getDataByTag(‘cabin‘)

     　　 // 将角度度换算成弧度 然后乘以随机数 实现随机风向
     　　 var randomDegrees = translateAngularRadian.radian * random
      　　var defaultDegress = translateAngularRadian.radian * 180

         ht.Default.startAnim({
         　　duration: 1e3,
         　　action: (v) => {
         　　　　var oldValue = cabin.getRotationY()
         　　　　var newValue = randomDegrees
         　　　　var addValue = newValue - oldValue

         　　cabin.setRotationY(oldValue + addValue * v)
       　　}
     　})
   　}
　}

var old3Value = whiteShell3Line.getRotationX()
var old4Value = whiteShell4Line.getRotationX()
var old5Value = whiteShell5Line.getRotationX()

// 指针和扇叶旋转的角度 进行变化
var oldPointerValue = pitchSystem.a(‘pointer‘) || 0
// 风机扇叶和变桨系统的旋转角度
var newRotateAngular = (this.windSpeed - 8) * 7.5 * translateAngularRadian.radian
var addPointerValue = newRotateAngular - oldPointerValue

whiteShell3Line.setRotationX(old3Value + ((newRotateAngular - oldPointerValue)))
whiteShell4Line.setRotationX(old4Value + ((newRotateAngular - oldPointerValue)))
whiteShell5Line.setRotationX(old5Value + ((newRotateAngular - oldPointerValue)))

var fanWireframe = d3d.getDataByTag(‘fanWireframe‘)
fanWireframe.setRotationMode(‘zxy‘)
this.allAnimManage = new Map([[‘fanRotate‘, null]])

var fanRotating = (easeType) => {
　　anim = ht.Default.startAnim({
　　　　duration: 5e3,
　　　　easing: (t) => easeIn(t),
　　　　action: (v) => {
　　　　　　fanWireframe.setRotationZ(fanWireframe.getRotationZ() + speed)

    　　　　// 风机轮毂旋转
    　　　　if (fanWireframe.getRotationZ() <= -6.28) {
    　　　　　　fanWireframe.setRotationZ(0)
    　　　　}

    　　　　// 风机扇叶 uv 偏移
    　　　　for (let i = 1; i < 17; i++) {
    　　　　　　var node = d3d.getDataByTag(`q${i}`)
    　　　　　　node.s(‘shape3d.uv.offset‘, fanOffsetData(v)[i - 1])
    　　　　}

    　　　　// 暂停命令
    　　　　if (isStop) {
    　　　　　　stopFanRotate(fanWireframe.getRotationZ())
    　　　　　　anim.pause()
    　　　　　　anim = null
    　　　　}
　　　　},
    　　finishFunc: () => {
    　　　　fanRotating(false)
    　　}
    })

    this.allAnimManage.set(‘fanRotate‘, anim)
}

// 判断风向
var windDirection = (rotate) => {
    let direction

    switch (true) {
    case rotate === 0:
        direction = ‘南‘
        break
    case rotate === 90:
        direction = ‘东‘
        break
    case rotate === 180:
        direction = ‘北‘
        break
    case rotate === 240:
        direction = ‘西‘
        break
    case rotate > 0 && rotate < 90:
        direction = ‘东南‘
        break
    case rotate > 90 && rotate < 180:
        direction = ‘东北‘
        break
    case rotate > 180 && rotate < 270:
        direction = ‘西北‘
        break
    case rotate > 270 && rotate < 360:
        direction = ‘西南‘
        break
    default:
        direction = ‘没有找到风向‘
    }

    return direction
}
// 判断是哪个方向
var angular = randomDegrees * translateAngularRadian.angular
var direction = windDirection(angular)