4、智慧变电站 - 外围电塔及电线绘制

创建高压电塔

创建的电塔模型需要在场地外围，所有位置和大小都要做一些调整

let fbxLoader = new FBXLoader();
// 创建group
let powerPylonGroup = new THREE.Group();
powerPylonGroup.name = "highVoltageTower";

fbxLoader.load(`/zhangyan-substation/models/高压电塔.FBX`, fbx => {
  fbx.scale.set(0.0007, 0.0007, 0.0007);
  let powerPylonModel = fbx;

  for (let i = 0; i < 3; i++) {
    let model1XOffset = i * 24;

    let model1 = powerPylonModel.clone();
    model1.name = '北部' + (i + 1) + '#高压电塔';
    model1.position.set(-34 + model1XOffset, 0, -131);
    powerPylonGroup.add(model1);

    let model2 = powerPylonModel.clone();
    model2.name = '南部' + (i + 1) + '#高压电塔';
    model2.position.set(-34 + model1XOffset, 0, -4);
    powerPylonGroup.add(model2);
  }
});

scene.add(powerPylonGroup);

创建电线

因为每一个电线都要贯穿不同类型的设备，所以需要进行多个设备段的电线生成，比如电塔到电阻、电阻到变压器、变压器到电力搭桥

1. 电线通过THREE.Line来实现，并且通过THREE.LineBasicMaterial来给Line添加材质；
2. 再区分每个设备的电线段落，进行设置起始点坐标、中间坐标、终点坐标即可
3. 拿电塔到电阻的场景做粒子，如下代码

let wireGroup = new THREE.Group();
wireGroup.name = "wireGroup";

let lineMaterial = new THREE.LineBasicMaterial({color: 0x656b72});//0x656b72-0xff0000
let line = new THREE.Line();
line.material = lineMaterial;

// 高压塔
for (let i = 0; i < 3; i++) {
  let model1XOffset = i * 24;
  // 北部高压塔
  let wireA1 = new THREE.CatmullRomCurve3([
    new THREE.Vector3( -30 + model1XOffset, 22, -63),
    new THREE.Vector3( -33 + model1XOffset, 10, -45 ),
    new THREE.Vector3( -35 + model1XOffset, 7.35, -26.5 ) 
  ]);
  let wireB1 = new THREE.CatmullRomCurve3([
    new THREE.Vector3( -31 + model1XOffset, 17, -63),
    new THREE.Vector3( -31.5 + model1XOffset, 10, -45 ),
    new THREE.Vector3( -32 + model1XOffset, 7.35, -26.5 )
  ]);
  let wireC1 = new THREE.CatmullRomCurve3([
    new THREE.Vector3( -30.5 + model1XOffset, 12.5, -63),
    new THREE.Vector3( -29.8 + model1XOffset, 10, -45 ),
    new THREE.Vector3( -29 + model1XOffset, 7.35, -26.5 )
  ]);
  let wireD1 = new THREE.CatmullRomCurve3([
    new THREE.Vector3( -22 + model1XOffset, 22, -63),
    new THREE.Vector3( -19 + model1XOffset, 10, -45 ),
    new THREE.Vector3( -17 + model1XOffset, 7.35, -26.5 )
  ]);
  let wireE1 = new THREE.CatmullRomCurve3([
    new THREE.Vector3( -21 + model1XOffset, 17, -63),
    new THREE.Vector3( -20.5 + model1XOffset, 10, -45 ),
    new THREE.Vector3( -20 + model1XOffset, 7.35, -26.5 )
  ]);
  let wireF1 = new THREE.CatmullRomCurve3([
    new THREE.Vector3( -22 + model1XOffset, 12.5, -63),
    new THREE.Vector3( -22.5 + model1XOffset, 10, -45 ),
    new THREE.Vector3( -23.2 + model1XOffset, 7.35, -26.5 )
  ]);

  // 北部电线
  this.generateWire(wireA1, line, wireGroup)
  this.generateWire(wireB1, line, wireGroup)
  this.generateWire(wireC1, line, wireGroup)
  this.generateWire(wireD1, line, wireGroup)
  this.generateWire(wireE1, line, wireGroup)
  this.generateWire(wireF1, line, wireGroup)
}

generateWire方法

// 生成电线
generateWire(_curveModel, _comLine, _wireGroup){
  let positionsArryA = [];
  let pointsA = _curveModel.getPoints(100)
  pointsA.forEach(d => {
    positionsArryA.push(d.x, d.y, d.z)
  })
  const positionsA = new Float32Array(positionsArryA)
  let lineGeoA = new THREE.BufferGeometry();
  lineGeoA.setAttribute('position', new THREE.BufferAttribute(positionsA, 3))

  let lineA = _comLine.clone();
  lineA.geometry = lineGeoA;
  _wireGroup.add(lineA);
}

如果把设备模型都隐藏，效果如下

如果把设备模型都放开，效果如下

好了，到了这一步骤，已经把场景内部的事情都处理的七七八八了，接下来就是给具体的变压器添加标注（很重要）
PS：项目源码及3d模型会在第三篇文章给出下载地址，或者添加wx：z13964122832备注“变电站源码”