Threejs物联网，工厂3D可视化，加载模型，水流监测，标签动态数据展示

function initShuiChang() {
  var loader = new THREE.GLTFLoader();
  // assets/models/fang/shapan.glb'
  loader.load('assets/models/shuichang/shuichang.glb', function(result) {
    var object = result.scene;
    console.log(object)
    object.traverse(function(item) {
      if (item instanceof THREE.Mesh) {
        item.material.color.set(0x1DA9FC);
        item.material.transparent = true;
        item.material.opacity = 0.5;
      }
    });
    object.scale.set(2, 2, 2);
    object.rotateY(3.14);
    scene.add(object);
  });
}

function createPath(pointsArr) {
  pointsArr = pointsArr.map((point) => new THREE.Vector3(...point)); // 将参数数组转换成点数组的形式
  // 方法一：自定义三维路径 curvePath
  const path = new THREE.CurvePath();
  for (let i = 0; i < pointsArr.length - 1; i++) {
    const lineCurve = new THREE.LineCurve3(pointsArr[i], pointsArr[i + 1]); // 每两个点之间形成一条三维直线
    path.curves.push(lineCurve); // curvePath有一个curves属性，里面存放组成该三维路径的各个子路径
  }
  return path;
}
const count = 200
const gColor = '#28f260'
const prop1 = {
  width: 416,
  height: 112,
  pos: [60, 35, 30],
  // scale:[24, 6, 0]
  scale: [0.24375 * count, 0.065625 * count, 0]
}
const tab1 = [
  ['一级高压泵后压力：', '20.2bar', gColor],
  ['一级循环泵后压力：', '0.2bar', ]
]
const prop2 = {
  width: 352,
  height: 196,
  pos: [-60, 40, 0],
  scale: [0.20625 * count, 0.11484375 * count, 0],
}
const tab2 = [
  ['进水情况', ''],
  ['进水温度：', '25.6℃', gColor],
  ['进水流量：', '2.5m³', ],
  ['进水电导：', '28.5ms/cm', gColor],
]
const prop3 = {
  width: 384,
  height: 256,
  pos: [5, 60, -60],
  scale: [0.225 * count, 0.15 * count, 0]
}
const tab3 = [
  ['产水情况', ''],
  ['一级回收率：', '58%', gColor],
  ['一级产水流量：', '1.75㎡', ],
  ['一级产水电量：', '980.5/cm', gColor],
  ['一级产水电量：', '0.5bar', gColor],
]
const prop4 = {
  width: 256,
  height: 64,
  pos: [-85, 30, 40],
  scale: [0.15 * count, 0.0375 * count, 0],
}
const tab4 = [
  ['泵机状态 ', '• 开启', gColor],
]
const prop5 = {
  width: 256,
  height: 64,
  pos: [-10, 50, 30],
  scale: [0.15 * count, 0.0375 * count, 0],
}
const tab5 = [
  ['阀门状态 ', '• 开启', gColor],
]
const props = [prop1, prop2, prop3, prop4, prop5]
const tabs = [tab1, tab2, tab3, tab4, tab5]
// 调用渲染标签，并定时刷新
handleDatachange();
setInterval(handleDatachange, 2000)
function handleDatachange() {
  let r = (Math.random() * 10 + 20).toFixed(2)
  tab2[1][1] = r + '℃'
  if (r > 25) tab2[1][2] = 'red'
  else tab2[1][2] = gColor
  r = Math.random().toFixed(2)
  tab3[4][1] = r + 'bar'
  if (r > 0.5) tab3[4][2] = 'red';
  else tab3[4][2] = gColor
  if (Math.random() > 0.5) {
    tab5[0][1] = '• 开启'
    tab5[0][2] = gColor
  } else {
    tab5[0][1] = '• 关闭'
    tab5[0][2] = 'red'
  }
  console.time('render sprite')
  initSprite()
  console.timeEnd('render sprite')
}
function initSprite() {
  clearSprite();
  (scene.children || []).forEach((v, idx) => {
    if (v.type == 'Mesh') {
      const borderColor = 'rgba(39, 179, 236, 1)'
      const color = 'rgba(255,255,255, 1)'
      makeTextSprite(scene, tabs, props, {
        color: color,
        borderColor,
        backgroundColor: 'rgba(255,255,255,0.05)'
      });
    }
  });
}
// 清空雪碧图
function clearSprite(type = 'Sprite') {
  const children = [];
  (scene.children || []).forEach((v, idx) => {
    if (v.type !== type) {
      children.push(v);
    }
  });
  scene.children = children;
}