风机.png
上一篇文章我们介绍了数字孪生，和该技术下孪生风机的诸多优点。本篇文章向大家介绍下孪生风机用了哪些前端技术？前端效果是如何实现的？
一、Canvas
简介
在web中，实现2D基本图形及动画效果，首先会想到使用canvas。例如上图，实现一个可以实时显示风向角变化的效果图。canvas非常灵活，能够很好地融合JavaScript代码并在浏览器内绘制华丽的图形，拥有多种绘制路径、形状、字符以及添加图像等方法。
面对各种复杂的图形及效果，我们可以采用canvas框架，例如Konva，它可以轻松的实现桌面应用和移动应用中的图形交互交互效果，可以高效的实现动画，变换， 节点嵌套， 局部操作，滤镜，缓存，事件等功能，不仅仅适用于桌面与移动开发， 还有更为广泛的应用。
实现
在实现动画实时变化效果时，如果每次风向发生改变，都需要重绘图形，效果显示难免有些单调。重新绘图的变化过程称为突变动画。
反面教材-突变动画
我们需要的是平滑的过渡效果，例如，风向角在上一时刻是36.89度，下一时刻是76.84度。动画效果由36.89度渐变到76.84度的平滑效果。
平滑动画
为避免突变动画的情况，我们需要在componentWillUpdate中监听角度参数rotation的变化，当有新的角度参数传入的时候，需要重新绘制图形并将新的参数传入。
代码如下：
componentWillUpdate(nextProps) {
if (nextProps.rotation !== this.props.rotation) {
this.layer.destroy()
this.tween.destroy()
this.drawWind(nextProps)
}
}
//旋转部分初始角度赋值为当前rotation。
let lineGroup = new Konva.Group({
x:radius,
y:radius,
rotation: this.props.rotation,//未变化时采用this.props值。动画处用nextProps
})
//动画部分旋转角度赋值为新的rotation。
this.tween = new Konva.Tween({
node: lineGroup,
easing: Konva.Easings.Linear,
duration: 0.5,
rotation: nextProps.rotation ? nextProps.rotation : nextProps.rotation === 0 ? 0 : this.props.rotation,
onFinish: () => {
this.tween.destroy()
}
});
二、Three.js
简介
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文档资料最多、使用最广泛的三维引擎；Three.js是纯渲染引擎，而且代码易读，适合作为学习WebGL、3D图形、3D数学应用的平台，也可以做中小型的重表现的Web项目。
风机
实现
风机模型加载完毕后，当鼠标移动到风机各个零部件时，所选部件增加线框以表示为选中状态。如果在此之前有选中其它部件，需移除其它部件的选中状态。当鼠标移出该部件的时候，将其线框移除。
选中状态
代码如下：监听鼠标事件的onMouseMove。
// 鼠标移入事件
this.mouseMove = (event) => {
//点击射线
let raycaster = new THREE.Raycaster();
// ⚠️⚠️⚠️ 注意此处的mouse必须设置，这样下面才能判断当前选中模型Group的单个组员
let mouse = new THREE.Vector2();
//将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
mouse.x = (event.offsetX / width) * 2 - 1;
mouse.y = -(event.offsetY / height) * 2 + 1;
//新建一个三维单位向量 假设z方向就是1
//根据照相机，把这个向量转换到视点坐标系
let vector = new THREE.Vector3(mouse.x, mouse.y, 1).unproject(camera)
//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
raycaster.setFromCamera(mouse, camera);
//在视点坐标系中形成射线,射线的起点向量是照相机， 射线的方向向量是照相机到点击的点，这个向量应该归一标准化。
raycaster.set(camera.position, vector.sub(camera.position).normalize())
//射线和模型求交，选中一系列直线
// 存放旋转部分点击
let intersectsFlabellum = raycaster.intersectObjects(flabellum.children, true)
// 存放旋转部分之外的点击
let intersectsObject = raycaster.intersectObjects(this.object.children, true)
if (intersectsFlabellum.length && !intersectsObject.length) {
if (intersectsFlabellum[0].object.name === '扇叶' && intersectsFlabellum.length < 3) {
if (this.state.mouseOver !== '扇叶') {
this.setState({ mouseOver: '扇叶' })
this.scene.remove(hubLineGroup)
}
} else if (intersectsFlabellum[0].object.name === '轮毂') {
if (this.state.mouseOver !== '轮毂') {
this.setState({ mouseOver: '轮毂' })
this.scene.add(hubLineGroup)
}
} else {
this.scene.remove(hubLineGroup)
if (!this.state.mouseSelect) {
this.setState({ mouseOver: '', control: true })
} else {
this.setState({ mouseOver: '' })
}
}
} else {
this.scene.remove(hubLineGroup)
}
if (intersectsObject.length) {
this.scene.remove(pitchGroup)
this.scene.remove(hubLineGroup)
if (intersectsObject[0].object.name === '主轴') {
if (this.state.mouseOver !== '主轴') {
this.setState({ mouseOver: '主轴' })
this.scene.add(mainAxleGroup)
this.scene.remove(gearGroup)
this.scene.remove(powerGroup)
}
} else if (intersectsObject[0].object.name === '齿轮结构') {
if (this.state.mouseOver !== '齿轮结构') {
this.setState({ mouseOver: '齿轮结构' })
this.scene.add(gearGroup)
this.scene.remove(mainAxleGroup)
this.scene.remove(powerGroup)
}
} else if (intersectsObject[0].object.name === '发电机箱') {
if (this.state.mouseOver !== '发电机箱') {
this.setState({ mouseOver: '发电机箱' })
this.scene.add(powerGroup)
this.scene.remove(mainAxleGroup)
this.scene.remove(gearGroup)
}
} else {
if (!this.state.mouseSelect) {
this.setState({ mouseOver: '', control: true })
} else {
this.setState({ mouseOver: '' })
}
this.scene.remove(mainAxleGroup)
this.scene.remove(gearGroup)
this.scene.remove(powerGroup)
}
} else {
this.scene.remove(mainAxleGroup)
this.scene.remove(gearGroup)
this.scene.remove(powerGroup)
}
if (!intersectsObject.length && !intersectsFlabellum.length) {
if (!this.state.mouseSelect) {
this.setState({ mouseOver: '', control: true })
} else {
this.setState({ mouseOver: '' })
}
}
}
鼠标点击查看详细信息，鼠标按下的时候，对此时正处于选中状态的部件进行动画处理。对于信息量较少的部件，需要给一个小弹窗来显示信息即可。
点击弹窗
代码如下：监听鼠标事件onClick。
// 点击事件
this.clickEvent = (event) => {
// 点击扇叶停止动画。点击扇叶并且下一次不点击扇叶开始动画。
if (this.state.isClickLeaf) {
this.setState({ isClickLeaf: false })
this.animate()
}
if (this.state.mouseOver) {
if (this.state.mouseOver === '扇叶') {
cancelAnimationFrame(this.animateId)
$('.popup').css({
left: event.offsetX,
top: event.offsetY - $('.popup').height(),
})
} else if (this.state.mouseOver === '轮毂') {
$('.popup').css({
left: event.offsetX,
top: event.offsetY - $('.popup').height(),
})
} else if (this.state.mouseOver === '主轴') {
$('.popup').css({
left: event.offsetX,
top: event.offsetY - $('.popup').height(),
})
} else if (this.state.mouseOver === '齿轮结构') {
this.setState({ mouseSelect: '齿轮结构', control: true })
} else if (this.state.mouseOver === '发电机箱') {
this.setState({ mouseSelect: '发电机', control: true })
} else if (this.state.mouseOver === '偏航系统') {
this.setState({ mouseSelect: '偏航系统', control: true })
}
} else {
if (this.state.mouseSelect !== '齿轮结构' && this.state.mouseSelect !== '偏航系统' && this.state.mouseSelect !== '发电机') {
this.setState({ mouseSelect: '', control: true })
}
}
}
当所选部件信息量较大时，如下显示。
复杂点击
结束语
web页面因Canvas和Three.js在2D和3D方面的支持变得丰富多彩，妙趣横生。生动丰富的数据展示，方便了我们对风机的数据的实时监测。
至此，本文和本系列文章已经告一段落了，希望可以帮助读者更加了解我们的孪生风机。有任何问题，欢迎联系我们！关注一下，下次找我不迷路！如果觉得文章有可取之处，还请多多点赞！
