fl-web-component 0.1.0

package/packages/components/model/utils/detect-v1.js

@@ -0,0 +1,341 @@
+import * as THREE from "three";
+
+class CollisionSystem {
+  /**
+   * @param {Object} options - 包含初始化所需的参数对象。
+   * @param {THREE.Scene} options.scene - Three.js 场景对象，该场景包含所有需要进行碰撞检测的实体。
+   * @param {Array} options.topologyData - 拓扑数据数组，包含实体之间的连接关系等信息。
+   */
+  constructor({ scene, topologyData }) {
+    this.scene = scene;
+    this.topologyData = topologyData;
+    this.entityMap = new Map(); // 所有实体 {id: Entity}
+    // 创建一个空数组，用于存储碰撞检测的结果，每个结果是一个包含发生碰撞的两个实体的对象
+    this.collisionResults = []; // 碰撞结果
+  }
+
+  // 主入口：初始化并运行碰撞检测
+  run() {
+    // 1. 遍历获取所有需要检测的实体
+    const allEntities = this.collectEntities();
+
+    // 2. 构建实体数据（含包围盒和连接关系）
+    this.buildEntitiesData(allEntities);
+
+    // 3. 执行碰撞检测
+    this.detectCollisions();
+
+    // 4. 展示结果
+    return this.showResults();
+  }
+
+  // 收集实体（模拟C++的GetIdsUnderCurWorkSpace）
+  collectEntities() {
+    return this.scene.children[0].children.filter((obj) => {
+      return obj.name?.indexOf("MODELELEM") != -1;
+    });
+  }
+
+  // 构建实体数据（核心逻辑）
+  buildEntitiesData(objects) {
+    objects.forEach((obj) => {
+      const curTopoObj = this.topologyData.find((item) => {
+        return item.ObjId === obj.name;
+      });
+
+      const connectedIds = new Set(curTopoObj.ConnectIDs);
+
+      // 创建包围盒
+      const tightBoxList = this.initTightData(obj);
+
+      const entity = {
+        id: obj.id,
+        obj: obj,
+        // tightBox: this.getTightBox(obj),
+        majorType: obj.userData.tags,
+        connectedIds: connectedIds,
+        isWeld: obj.userData.tags?.includes("PIPE_PIPEWELD"),
+        tightBoxList: tightBoxList,
+      };
+      this.entityMap.set(obj.id, entity);
+    });
+  }
+
+  /**
+   * 初始化紧密包围盒数据
+   * @param {Object} obj - 需要初始化紧密包围盒数据的对象
+   * @returns {Object} - 包含坐标和包围盒信息的对象
+   */
+  initTightData(obj) {
+    const { coord, box } = obj.userData.bounding;
+
+    const maxPt = this.parseVector3(box.maxPt);
+    const minPt = this.parseVector3(box.minPt);
+
+    const m_coord = this.initCoord3D(coord);
+    const m_box = {
+      max: maxPt,
+      min: minPt,
+    };
+    return {
+      m_coord,
+      m_box,
+    };
+  }
+
+  /**
+   * 将字符串解析为 THREE.Vector3 对象。
+   * @param {string} str - 包含三个数字的字符串，数字之间用逗号分隔。
+   * @returns {THREE.Vector3} - 解析后的 THREE.Vector3 对象。
+   */
+  parseVector3(str) {
+    // 将字符串按逗号分割成数组，并将每个元素转换为数字，然后传递给 THREE.Vector3 构造函数
+    return new THREE.Vector3(...str.split(",").map(Number));
+  }
+
+  // 碰撞检测主逻辑（双层过滤）
+  detectCollisions() {
+    const entities = Array.from(this.entityMap.values());
+
+    entities.forEach((entityA) => {
+      // 排除焊点、垫片等不需要检测的实体
+      if (this.shouldSkipEntity(entityA)) return;
+
+      entities.forEach((entityB) => {
+        //先判断两个实体是否是自己
+        if (entityA.id === entityB.id) return;
+        if (this.shouldSkipPair(entityA, entityB)) return;
+
+        // 执行包围盒相交检测
+        const obbListA = entityA.tightBoxList;
+        const obbListB = entityB.tightBoxList;
+
+        // if (entityA.tightBox.intersectsBox(entityB.tightBox)) {
+        //   this.collisionResults.push({ entityA, entityB });
+        // }
+
+        if (this.collIntersect(obbListA, obbListB)) {
+          this.collisionResults.push({ entityA, entityB });
+        }
+      });
+    });
+  }
+
+  // 获取紧包围盒（优先子图段）
+  getTightBox(obj) {
+    let box = new THREE.Box3();
+
+    box.setFromObject(obj);
+    return box;
+  }
+
+  // 业务规则过滤（核心逻辑）
+  shouldSkipEntity(entity) {
+    // 排除焊点、垫片等
+    return (
+      entity.isWeld ||
+      entity.obj.userData.tags.includes("GASK") ||
+      entity.obj.userData.tags.includes("FLAN")
+    );
+  }
+
+  /**
+   * 判断两个实体是否应该跳过碰撞检测。
+   * @param {Object} entityA - 第一个实体对象。
+   * @param {Object} entityB - 第二个实体对象。
+   * @returns {boolean} - 如果应该跳过检测返回 true，否则返回 false。
+   */
+  shouldSkipPair(entityA, entityB) {
+    // 已连接的实体不检测
+    if (entityA.connectedIds.has(entityB.obj.name)) return true;
+
+    // 专业类型过滤规则
+    const { majorType: aType } = entityA;
+    const { majorType: bType } = entityB;
+
+    //先判断两个实体是否是自己或者互相连接的且垫片不单独参与碰撞
+    if (aType.includes("GASK") || bType.includes("GASK")) return true;
+
+    if (bType.includes("PIPE_PIPEWELD")) return true;
+
+    if (bType === "") return true;
+
+    // 设备专业特殊规则
+    //设备不和管线等专业碰撞  但是管线和设备碰撞
+    if (
+      aType.includes("TAG_MAJOR_DEVICE") &&
+      !bType.includes("TAG_MAJOR_DEVICE")
+    )
+      return true;
+
+    // 管线专业只与设备和管线碰撞
+    //piping只能和设备以及piping专业碰撞
+    if (
+      aType.includes("TAG_MAJOR_PIPINIG") &&
+      !bType.includes("TAG_MAJOR_DEVICE") &&
+      !bType.includes("TAG_MAJOR_PIPINIG")
+    )
+      return true;
+
+    // 土建专业特殊规则
+    //土建专业只和piping和设备专业碰撞
+    if (
+      aType.includes("TAG_MAJOR_ARCH") &&
+      (bType.includes("TAG_MAJOR_ARCH") ||
+        (!bType.includes("TAG_MAJOR_PIPINIG") &&
+          !bType.includes("TAG_MAJOR_DEVICE")))
+    )
+      return true;
+
+    if (
+      bType.includes("TAG_MAJOR_ARCH") &&
+      !aType.includes("TAG_MAJOR_PIPINIG") &&
+      !aType.includes("TAG_MAJOR_DEVICE")
+    )
+      return true;
+
+    // if(aType.includes('TAG_MAJOR_HVAC') && bType.includes('TAG_MAJOR_ARCH')){
+    //   console.log(entityB)
+    //   console.log(bType.includes('TAG_MAJOR_ARCH'))
+    // }
+    return false;
+  }
+
+  initCoord3D(coord) {
+    const origin = this.parseVector3(coord.Origin);
+    const dirX = this.parseVector3(coord.dirX).normalize();
+    const dirY = this.parseVector3(coord.dirY).normalize();
+    const dirZ = this.parseVector3(coord.dirZ).normalize();
+
+    return {
+      origin,
+      dirX,
+      dirY,
+      dirZ,
+    };
+  }
+
+  globalPoint(localPoint, { origin, dirX, dirY, dirZ }) {
+    return origin
+      .clone()
+      .add(dirX.clone().multiplyScalar(localPoint.x))
+      .add(dirY.clone().multiplyScalar(localPoint.y))
+      .add(dirZ.clone().multiplyScalar(localPoint.z));
+  }
+
+  /**
+   * 获取包围盒的半向量数组。
+   *
+   * 此方法用于计算并返回包围盒在三个坐标轴方向上的半向量。
+   * 半向量是指从包围盒中心到其边界在各个坐标轴方向上的向量。
+   *
+   * @param {Object} param - 包含包围盒和坐标系统信息的对象。
+   * @param {Object} param.m_box - 包围盒对象，包含 max 和 min 属性，分别表示包围盒的最大点和最小点。
+   * @param {Object} param.m_coord - 坐标系统对象，包含 origin、dirX、dirY 和 dirZ 属性，分别表示原点和三个坐标轴方向。
+   * @returns {Array<THREE.Vector3>} - 包含三个半向量的数组，分别对应 X、Y 和 Z 轴方向。
+   */
+  getHalfVectors({ m_box, m_coord }) {
+    const halfSize = new THREE.Vector3()
+      .subVectors(m_box.max, m_box.min)
+      .multiplyScalar(0.5);
+
+    return [
+      m_coord.dirX.clone().multiplyScalar(halfSize.x),
+      m_coord.dirY.clone().multiplyScalar(halfSize.y),
+      m_coord.dirZ.clone().multiplyScalar(halfSize.z),
+    ];
+  }
+
+  centerPt({ m_box, m_coord }) {
+    const center = this.getCenter(m_box);
+    return this.globalPoint(center, m_coord);
+  }
+  /**
+   * 计算包围盒的中心点。
+   * @param {Object} m_box - 包围盒对象，包含 max 和 min 属性，分别表示包围盒的最大点和最小点。
+   * @returns {THREE.Vector3} - 包围盒的中心点向量。
+   */
+  getCenter(m_box) {
+    // 将包围盒的最大点和最小点相加
+    // 然后将结果乘以 0.5，得到中心点的坐标
+    return new THREE.Vector3()
+      .addVectors(m_box.max, m_box.min)
+      .multiplyScalar(0.5);
+  }
+
+  /**
+   * 检测两个包围盒是否相交
+   * @param {Object} box1 - 第一个包围盒对象，包含 m_box 和 m_coord 属性
+   * @param {Object} box2 - 第二个包围盒对象，包含 m_box 和 m_coord 属性
+   * @param {number} distEpsilon - 距离容差，默认为 0
+   * @returns {boolean} - 如果两个包围盒相交返回 true，否则返回 false
+   */
+  collIntersect(box1, box2, distEpsilon = 0) {
+    const v_center = new THREE.Vector3().subVectors(
+      this.centerPt(box2),
+      this.centerPt(box1)
+    );
+
+    const axes = [...this.getHalfVectors(box1), ...this.getHalfVectors(box2)];
+
+    const sqrDistEpsilon = distEpsilon * distEpsilon;
+
+    const isSplit = (n) => {
+      let sumProj = 0;
+      axes.forEach((axis) => {
+        sumProj += Math.abs(axis.dot(n));
+      });
+
+      const nLengthSq = n.dot(n);
+      const epsilon = sqrDistEpsilon * nLengthSq;
+      const centerProj = Math.abs(v_center.dot(n));
+      const minus = centerProj - sumProj;
+
+      return minus >= 0 && epsilon <= minus * minus;
+    };
+
+    if (v_center.lengthSq() > 0 && isSplit(v_center)) {
+      return false;
+    }
+
+    for (let i = 0; i < 6; i++) {
+      if (isSplit(axes[i])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  showResults() {
+    const groupMap = {};
+    this.collisionResults.forEach((item) => {
+      const aId = item.entityA.id;
+      const bId = item.entityB.id;
+      const aObjectid = item.entityA.obj.name;
+      const bObjectid = item.entityB.obj.name;
+      const aCategory = item.entityA.obj.userData.category;
+      const bCategory = item.entityB.obj.userData.category;
+      if (!groupMap[aId]) {
+        groupMap[aId] = {
+          id: aId,
+          objectid: aObjectid,
+          category: aCategory,
+          detect: [],
+        };
+      }
+      groupMap[aId].detect.push({
+        id: bId,
+        objectid: bObjectid,
+        category: bCategory,
+      });
+    });
+
+    const formatCollisionResults = Object.values(groupMap);
+
+    console.log("碰撞结果", formatCollisionResults);
+    return formatCollisionResults;
+  }
+}
+
+export default CollisionSystem;

package/packages/components/model/utils/index.js

@@ -0,0 +1,48 @@
+import { Loading } from 'element-ui'
+var loadingInstance = {}
+export function dateFormat(dateData) {
+  var date = new Date(dateData)
+  var y = date.getFullYear()
+  var m = date.getMonth() + 1
+  m = m < 10 ? ('0' + m) : m
+  var d = date.getDate()
+  d = d < 10 ? ('0' + d) : d
+  const time = y + '-' + m + '-' + d
+  return time
+}
+
+export function getItem(key) {
+  let item = localStorage.getItem(key)
+  if (item) {
+    return JSON.parse(item)
+  }
+  return null
+}
+
+export function loading(tips = '拼命加载中...') {
+  loadingInstance = Loading.service({
+    lock: true,
+    fullscreen: true,
+    text: tips,
+    spinner: 'el-icon-loading',
+    background: 'rgba(255, 255, 255, 0.5)'
+  })
+}
+
+export function loadingClose() {
+  loadingInstance.close()
+}
+
+// 节流 fn要防抖的函数 t是时间
+export function debounce(fn, t) {
+  const delay = t || 500
+  let timer
+  return function() {
+    const args = arguments
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => {
+      timer = null
+      fn.apply(this, args)
+    }, delay)
+  }
+}

package/packages/components/model/utils/threejs/measure-angle.js

@@ -0,0 +1,258 @@
+import * as THREE from 'three'
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
+var _this = null
+var MeasureAngle = function(renderer, scene, camera, width, height) {
+  this.renderer = renderer
+  this.scene = scene
+  this.camera = camera
+  this.pointArray = [] // 保存当前操作所添加的点
+  this.raycaster = new THREE.Raycaster()
+  this.points = [] // 保存页面中所添加的点
+  this.polyline = [] //保存页面中所添加的直线
+  this.labels = [] // 保存页面中所添加的文本
+  this.curves = [] // 保存页面所有的曲线
+  this.tempPoints = undefined
+  this.tempLine = undefined
+  this.tempLabel = undefined
+  this.tipsLabel = undefined
+  this.isCompleted = false
+  this.curveLine = undefined
+  this.timer = null
+  this.width = width
+  this.height = height
+  // this.POINT_MATERIAL = new THREE.PointsMaterial({ color: 0xff5000, size: 1, opacity: 0.6, transparent: true, depthWrite: false, depthTest: false })
+  // this.LINE_MATERIAL = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 3, opacity: 0.8, transparent: true, side: THREE.DoubleSide, depthWrite: false, depthTest: false })
+}
+
+MeasureAngle.prototype = {
+  start() {
+    _this = this
+    this.renderer.domElement.style.cursor = 'crosshair'
+    this.renderer.domElement.addEventListener('click', this.click, false)
+    this.renderer.domElement.addEventListener('mousemove',  this.mousemove, false)
+    this.renderer.domElement.addEventListener('contextmenu', this.rightClick, false)
+  },
+  updateParams(width, height) {
+    this.camera.aspect = width / height
+    this.camera.updateProjectionMatrix()
+    this.renderer.setSize(width, height, true)
+    this.width = width
+    this.height = height
+  },
+  getPosition(e) {
+    const mouse = new THREE.Vector2()
+    mouse.x = (e.clientX / _this.width) * 2 - 1
+    mouse.y = -(e.clientY / _this.height) * 2 + 1
+    _this.raycaster.setFromCamera(mouse, this.camera)
+    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true)
+    if(intersects.length > 0) {
+      return intersects[0].point
+    }
+    return null
+  },
+  createPoints(pos, config = {color: 0x009bea, size: 0.3}) {
+    const mesh = new THREE.MeshBasicMaterial({color: config.color || 0x009bea})
+    const geom = new THREE.SphereGeometry(config.size || 0.3, 28, 28)
+    const sphere = new THREE.Mesh(geom, mesh)
+    sphere.position.set(pos.x, pos.y, pos.z)
+    return sphere
+  },
+  createLine(p1, p2, config={color: 0xff0000}) {
+    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 10 })
+    const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2])
+    const line = new THREE.Line(lineGeometry, lineMaterial)
+    line.frustumCulled = false;
+
+    return line
+  },
+  createLabel(name, text, position) {
+    const div = document.createElement('div')
+    div.className = name
+    div.textContent = text
+    const divLabel = new CSS2DObject(div)
+    divLabel.position.set(position.x, position.y, position.z)
+    return divLabel
+  },
+  mousemove(e) {
+    if (_this.isCompleted || _this.pointArray.length === 0) return
+      const point = _this.getPosition(e)
+    if (point) {
+      _this.pointArray.length === 1 ? _this.pointArray.push(point) : _this.pointArray.splice(_this.pointArray.length - 1, 1, point)
+      const length = _this.pointArray.length
+      const p1 = _this.pointArray[length - 2]
+      const p2 = _this.pointArray[length - 1]
+      if (_this.tempPoints) {
+        _this.tempPoints.position.set(point.x, point.y, point.z)
+      } else {
+        const geom = _this.createLabel('circle-tag', '', point)
+        _this.tempPoints = geom
+        _this.points.push(geom)
+        _this.scene.add(geom)
+      }
+      if (_this.tempLine) {
+        _this.tempLine.geometry.setFromPoints([p1, p2])
+      } else {
+        _this.tempLine = _this.createLine(p1, p2)
+        _this.polyline.push(_this.tempLine)
+        _this.scene.add(_this.tempLine)
+      }
+      // 三点构成一个角
+      if (_this.pointArray.length === 3) {
+        const angle = _this.calculateAngle().toFixed(2) + '°'
+        const p0 = _this.pointArray[0]
+        const p1 = _this.pointArray[1]
+        const p2 = _this.pointArray[2]
+        const v1 = new THREE.Vector3((p0.x + p1.x) / 2, (p0.y + p1.y) / 2, (p0.z + p1.z) / 2)
+        const v2 = new THREE.Vector3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2)
+        const curve = new THREE.CatmullRomCurve3(
+          [v1, v2]
+        )
+        const points = curve.getPoints(50)
+        if (_this.tempLabel) {
+          _this.tempLabel.element.textContent = angle
+          _this.tempLabel.position.set(p1.x, p1.y, p1.z)
+          _this.curveLine.geometry.setFromPoints(points)
+        } else {
+          _this.tempLabel = _this.createLabel('measure-label', angle, p1)
+          _this.labels.push(_this.tempLabel)
+          _this.scene.add(_this.tempLabel)
+         _this.createCurve(points)
+        }
+      }
+      if (_this.tipsLabel) {
+        _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05)
+      }
+    }
+  },
+  createTipsLabel(label, position) {
+    const div = document.createElement('div')
+    div.className = 'tips-label'
+    div.textContent = label
+    div.style = 'top: -50px'
+    const tipsLabel = new CSS2DObject(div)
+    tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05)
+    return tipsLabel
+  },
+  click(e) {
+    if (_this.isCompleted) {
+      _this.renderer.domElement.addEventListener('mousemove', _this.mousemove)
+    }
+    clearTimeout(_this.timer)
+    _this.timer = setTimeout(() => {
+      _this.isCompleted = false
+      const point = _this.getPosition(e)
+      if (point) {
+        if(_this.tipsLabel) {
+          _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05)
+        } else {
+          _this.tipsLabel = _this.createTipsLabel('左击绘制右击结束', point)
+          _this.scene.add(_this.tipsLabel)
+        }
+        if (_this.tempPoints) {
+          _this.tempPoints.position.set(point.x, point.y, point.z)
+          _this.tempPoints = undefined
+        } else {
+          const geom =_this.createLabel('circle-tag', '', point)
+          _this.points.push(geom)
+          _this.scene.add(geom) 
+        }
+        _this.tempLine = undefined
+        _this.tempLabel = undefined
+        _this.pointArray.push(point)
+      }
+    })
+  },
+  rightClick(e) {
+    if(_this.tipsLabel) {
+      _this.scene.remove(_this.tipsLabel)
+      _this.tipsLabel = undefined
+    }
+    clearTimeout(_this.timer)
+    const point =  _this.getPosition(e)
+    // if (point) {
+      if (_this.pointArray.length <= 3) {
+        _this.scene.remove(_this.points[_this.points.length-1])
+        _this.scene.remove(_this.points[_this.points.length-2])
+
+        if(_this.pointArray.length == 3){
+          _this.scene.remove(_this.points[_this.points.length-3])
+
+          _this.scene.remove(_this.polyline[_this.polyline.length-1])
+          _this.scene.remove(_this.polyline[_this.polyline.length-2])
+
+          _this.scene.remove(_this.curves[_this.curves.length-1])
+
+          _this.scene.remove(_this.tempLabel)
+        }
+      }
+      _this.scene.remove(_this.tempPoints)
+      _this.scene.remove(_this.tempLine)
+   
+      _this.isCompleted = true
+      _this.tempPoints = undefined
+      _this.tempLine = undefined
+      _this.tempLabel = undefined
+      _this.pointArray.splice(0)
+      _this.renderer.domElement.removeEventListener('mousemove', _this.mousemove)
+    // }
+  },
+  close() {
+    this.renderer.domElement.removeEventListener('mousemove', this.mousemove)
+    this.renderer.domElement.removeEventListener('click', this.click)
+    this.renderer.domElement.removeEventListener('contextmenu', this.rightClick)
+    this.remove(this.points)
+    this.remove(this.polyline)
+    this.remove(this.labels)
+    this.remove(this.curves)
+    this.pointArray.splice(0)
+    this.points.splice(0)
+    this.polyline.splice(0)
+    this.labels.splice(0)
+    this.curves.splice(0)
+    this.tempPoints = undefined
+    this.tempLabel = undefined
+    this.tempLine = undefined
+    this.scene.remove(this.tipsLabel)
+    this.tipsLabel = undefined
+    this.renderer.domElement.style.cursor = 'pointer'
+  },
+  remove(array) {
+    for (let index = 0; index < array.length; index++) {
+      const element = array[index]
+      if (element.geometry) {
+        element.geometry.dispose()
+      }
+      this.scene.remove(element)
+    }
+  },
+  calculateAngle() {
+    const p1 = _this.pointArray[1].clone()
+    const p2 = _this.pointArray[1].clone()
+    const dir0 = p1.sub(_this.pointArray[0]).clone()
+    const dir1 = p2.sub(_this.pointArray[2]).clone()
+    const angle = dir0.angleTo(dir1)
+    return angle * 180 / Math.PI
+  },
+  createCurve(points) {
+    const geom = new THREE.BufferGeometry().setFromPoints(points)
+    const material = new THREE.LineBasicMaterial({color: 0xff0000})
+    _this.curveLine = new THREE.Line(geom, material)
+    _this.curves.push(_this.curveLine)
+    _this.scene.add(_this.curveLine)
+  },
+  numberToString(num) {
+    if (num < 0.0001) {
+      return num.toString()
+    }
+    let fractionDigits = 2
+    if (num < 0.01) {
+      fractionDigits = 4
+    } else if (num < 0.1) {
+      fractionDigits = 3
+    }
+    return num.toFixed(fractionDigits)
+  }
+}
+export default {
+  MeasureAngle
+}