基于three进行数字孪生平台架构设计及应用实现

最新推荐文章于 2025-03-18 00:00:00 发布

合抱阴阳

最新推荐文章于 2025-03-18 00:00:00 发布

阅读量877

点赞数 29

文章标签： three 前端数字孪生

本文链接：https://blog.csdn.net/weixin_42496466/article/details/145858022

版权

一、基础概念

数字孪生平台是一种基于数字孪生技术的综合性平台，旨在通过虚拟模型对物理实体进行实时监控、仿真、分析和优化。它广泛应用于工业制造、智慧城市、医疗健康、能源管理等领域，帮助企业和组织实现数字化转型和智能化管理。

核心功能

数据采集与集成：
- 通过物联网（IoT）设备、传感器等实时采集物理实体的数据。
- 集成多源数据（如历史数据、环境数据、业务数据等）。
建模与仿真：
- 基于物理实体的几何、物理、行为等特性，构建高保真数字模型。
- 支持动态仿真，模拟物理实体在不同条件下的行为和性能。
实时监控与可视化：
- 实时监控物理实体的状态和运行情况。
- 通过3D可视化、AR/VR等技术直观展示数字孪生模型。
分析与预测：
- 利用大数据分析和人工智能技术，对采集的数据进行深度分析。
- 预测设备故障、性能变化等，支持决策优化。
优化与控制：
- 基于分析结果，优化物理实体的运行参数或业务流程。
- 支持远程控制和自动化操作。
协同与共享：
- 支持多用户、多部门协同工作。
- 提供数据共享和协作功能，提升团队效率。

应用场景

工业制造：
- 设备健康管理：实时监控设备状态，预测故障。
- 生产线优化：通过仿真优化生产流程，提高效率。
- 产品设计：在虚拟环境中测试产品性能，缩短研发周期。
智慧城市：
- 城市基础设施管理：监控交通、能源、水务等系统。
- 应急管理：模拟突发事件，优化应急预案。
医疗健康：
- 患者健康管理：通过数字孪生模型监控患者健康状况。
- 医疗设备管理：优化设备使用和维护。
能源管理：
- 电网优化：实时监控电网运行状态，预测负荷变化。
- 新能源管理：优化风电场、光伏电站的运行效率。
交通运输：
- 车辆监控：实时监控车辆状态，优化行驶路线。
- 交通流量管理：通过仿真优化交通信号控制。

关键技术

物联网（IoT）：实现物理实体与数字模型的实时数据交互。
大数据分析：处理和分析海量数据，提取有价值的信息。
人工智能（AI）：用于预测、优化和自动化决策。
云计算：提供强大的计算和存储能力，支持大规模数字孪生应用。
3D建模与可视化：构建高保真模型并实现直观展示。
边缘计算：在数据源附近进行实时处理，降低延迟。

优势

数字孪生平台作为数字化转型的核心工具，正在改变各行各业的运营模式，未来将成为智能化管理的重要基础设施。

二、软件架构设计

采用Three.js技术开发数据孪生平台，Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。由配置层、数据层、图层管理、事件交互配置、渲染设置、符号设置、材质资源管理、微件工具管理、可视化组件、工具接口。可支持多场景业务应用。

场景集合配置

集合符号配置

集合渲染设置

集合精灵点击事件配置

三、关键代码及软件实现效果

关键代码

<template>
  <div ref="modelThree" style="background: url('/static/data/textures/bg4.png');background-size: cover; /* 背景图片覆盖整个容器 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-attachment: fixed; /* 背景图片固定，不随滚动条滚动 */
  background-position: center; ">
    <div id="floatInfo"></div>
    <popHover :popHoverInfo="popHoverInfo" :popHoverScreenPoint="popHoverScreenPoint" :popHoverVisible="popHoverVisible"></popHover>
    <popClick :popAspect="popAspect" :popClickScreenPoint="popClickScreenPoint" :popClickVisible="popClickVisible" :popClickTitleInfo="popClickTitleInfo" :popClickContentInfo="popClickContentInfo" @setPopClickVisible="setPopClickVisible"></popClick>
  </div>
  <div id="jindu-text-con" v-if="percent!==100">
    正在加载模型请稍等：<span id="jindu-text">{{percent}}%</span>
    <div class="jindu-con" >
      <div id="jindu" :style="{ width: percent + '%' }"></div>
    </div>
  </div>
  <div id="gisToolPopoup">
    <myTool :zdhThreeCommon="zdhThreeCommon" @set-layer-visible="setLayerVisible"  @zoom-to-c="zoomScale"/>
  </div>
  <div id="layersPanel">
    <layerPanel :layersInfo="zdhThreeCommon.LayersInfo" @setLayerVisible="setLayerVisible" @setLayerOpacity="setLayerOpacity" @zoomToC="zoomToC"></layerPanel>
  </div>
</template>

<script setup>
import * as THREE from 'three'
import { ref, onMounted, onBeforeUnmount, getCurrentInstance } from "vue";
import layerPanel from './widgets/layerPanel/index'
import popClick from './widgets/popClick/index'
import popHover from './widgets/popHover/index'
import myTool from "./myTool";
import threeCommon from "@/components/three/threeCommon";
import { LayersInfo } from './layerInfo/LayersInfo'
let scene,zdhThreeCommon = null;
const modelThree = ref(null);
const percent = ref(0)
const popHoverScreenPoint =ref({x: null, y: null})
const popHoverInfo = ref("")
const popHoverVisible=ref(false)
const popClickScreenPoint = ref({x: null, y: null})
const popAspect = ref( {cWidth: 900, cHeight: 400})
const popClickPoint = ref( null)

const popClickTitleInfo = ref( '液位仪')
const popClickContentInfo = ref({})
let popClickVisible = ref(false)
// layersInfo = zdhThreeCommon.LayersInfo
/********************** 创建3D场景 ***********************/
scene = new THREE.Scene();
const  markClick =(re,layerCode) =>{
  popClickTitleInfo.value = re._data.name
  popClickContentInfo.value = re._data

  setPopClickVisible(true)

  console.log(layerCode,re)
}
const  markerMove =(re,layerCode) =>{
  console.log(layerCode,re)
}

zdhThreeCommon = new threeCommon(
    scene,
    {
      ProgressBarPercent:percent
    },
    markClick,markerMove
)
zdhThreeCommon.init()
onMounted(()=>{
  modelThree.value.appendChild(zdhThreeCommon.renderer.domElement);
})
/********************** 清空 ***********************/
onBeforeUnmount(() => {
  zdhThreeCommon.clear();
})
const setPopClickVisible =(visible) =>{
  popClickVisible.value = visible
}
const setLayerVisible = (layerId, visible) => {
  zdhThreeCommon.getLayerByCode(layerId).visible = visible
  zdhThreeCommon.getLayerByCode(layerId).layer.visible = visible
}
const zoomScale = (zType) => {
  debugger
  if(zType==1){
    zdhThreeCommon.camera.fov += 1;
  }else {
    zdhThreeCommon.camera.fov -= 1;
  }

  zdhThreeCommon.camera.updateProjectionMatrix();
  zdhThreeCommon.renderer.render(scene, zdhThreeCommon.camera);
}
const setLayerOpacity = (layerId, opacity) => {
  zdhThreeCommon.getLayerByCode(layerId).opacity = opacity
}
const zoomToC =(layerId) => {
  if(zdhThreeCommon.getLayerByCode(layerId).viewInfo){
    zdhThreeCommon.setView(zdhThreeCommon.getLayerByCode(layerId).viewInfo.position,zdhThreeCommon.getLayerByCode(layerId).viewInfo.target)
  }else {
    zdhThreeCommon.focusModel(zdhThreeCommon.getLayerByCode(layerId).layer)
  }
}
</script>

<style lang="less" scoped>
@import url('../../../public/static/css/css/mapoperatestyle.css');
.jindu-con {
  width: 280px;
  height: 10px;
  border-radius: 50px;
  background-color: white;
  margin-top: 10px;
  overflow: hidden;
}

#jindu {
  height: inherit;
  background-color: #007bff;
  width: 0;
}

#jindu-text-con {
  width: 300px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 15%;
  text-align: center;
  background-color: rgba(255, 255, 255, .5);
  padding: 10px;
}
#floatInfo{
  position: absolute;
  color: #fff;
  user-select: none;
}
#popup1 {
  position: absolute;
  top: 50px;
  right: 20px;
}
.ol-zoom{
  display: none;
}
#gisToolPopoup{
  position: absolute;
  top: 150px;
  left: 20px;
}
#layersPanel{
  position: absolute;
  top: 110px;
  right: 50px;
}
</style>