数字孪生下的孪生风机，前端技术介绍

前端开发程序员2010

关注

原创最新推荐文章于 2026-08-30 16:25:47 发布 813 阅读 AI 写同款· GEO 优化 ›

数字孪生技术（前端实现）而 three.js 作为使用WebGL技术开发的三维引擎，较好的封装了WebGL提供的接口，隐藏了WebGL的基本图像渲染细节，极大的节省了学习成本，使用者可以简单快捷的操作使用。LOD(Level of Detail)是Charknl为了提高图像实时绘制的速度提出[⒅，LOD是通过对层次化细节的处理，来补偿损失的硬件性能，在用户察觉不到效果损失的前提下，可以提高实时显示系统的帧率。模拟不同产品细节部件，不同部件参数，在不同条件下的生产活动过程，避免错误选择，提高产品参数配置的准确性；阅读详情

上一篇文章我们介绍了数字孪生，和该技术下孪生风机的诸多优点。本篇文章向大家介绍下孪生风机用了哪些前端技术？前端效果是如何实现的？

一、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()
}
});``

实现
风机模型加载完毕后，当鼠标移动到风机各个零部件时，所选部件增加线框以表示为选中状态。如果在此之前有选中其它部件，需移除其它部件的选中状态。当鼠标移出该部件的时候，将其线框移除。

代码如下：监听鼠标事件的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方面的支持变得丰富多彩，妙趣横生。生动丰富的数据展示，方便了我们对风机的数据的实时监测。
至此，本文和本系列文章已经告一段落了，希望可以帮助读者更加了解我们的孪生风机。有任何问题，欢迎联系我们！关注一下，下次找我不迷路！如果觉得文章有可取之处，还请多多点赞！

收录于