5、智慧变电站 - 变压器等设备sprite标注

使用canvas创建图片背景

createDeviceIndicator(canvasConfig) {
  let canvas = document.createElement('canvas');
  canvas.width = 340;
  canvas.height = 240;
  let context = canvas.getContext('2d');
  //添加背景图片，进行异步操作

  return new Promise((resolve, reject) => {
    let imgMain = new Image();
    imgMain.src = canvasConfig.img;
    let imgPoint = new Image();
    imgPoint.src = "/zhangyan-substation/images/tkPr.png";

    //图片加载之后的方法
    imgMain.onload = () => {
      //将画布处理为透明
      context.clearRect(0, 0, canvas.width, canvas.height );
      //绘画图片
      context.drawImage(imgMain, 0, 0, canvasConfig.width, canvasConfig.height);
      imgPoint.onload = () =>{
        // context.drawImage(imgPoint, 0, 160);
        resolve(makeText(context, canvas, canvasConfig));
      }
    };
    //图片加载失败的方法
    imgMain.onerror = (e) => {
      reject(e);
    };
  });
};

使用CanvasTexture把文字写入到材质

//内部方法进行文字输入 
function makeText(context, canvas, canvasConfig) {
  context.textAlign = 'start';
  context.font = ' 36px Microsoft YaHei';
  context.fillStyle = '#ffffff';
  context.fillText( canvasConfig.txt, canvasConfig.txtPaddingX, canvasConfig.txtPaddingY);
  // context.fillText('状态：' + canvasConfig.status, 30, 140);
  //将画布写入纹理，并返回材质
  let texture = new THREE.CanvasTexture(canvas);
  return new THREE.SpriteMaterial({map: texture}); 
}

使用SpriteMaterial来创建Sprite

addTransformerModel() {
  let gloader = new GLTFLoader();
  // 创建group
  let transformerGroup = new THREE.Group();
  transformerGroup.name = "transformerGroup";
  gloader.load(`/zhangyan-substation/models/8. 变压器.glb`, gltf => {
    gltf.scene.scale.set(0.9, 0.9, 0.9);
    gltf.scene.rotation.y = -0.5 * Math.PI;
    let transformerPylonModel = gltf.scene;

    for (let i = 0; i < 6; i++) {
      let model1XOffset = i * 12;
      let model1 = transformerPylonModel.clone();
      model1.name = (i + 1) + '#变压器';
      model1.position.set(41 + model1XOffset, -0.1, 104.7);
      byqList.push(model1)
      transformerGroup.add(model1);
    }

    // 添加精灵
    transformerGroup.children.forEach((item, index) => {
      let model1XOffset = index * 11.8;
      this.createDeviceIndicator({
        img: '/zhangyan-substation/images/tk-blue.png',
        width: 200,
        height: 90,
        txt: (index + 1) + '#变压器',
        status: '正常',
        txtPaddingX: 22,
        txtPaddingY: 60
      }).then((panelMate) => {
        let panelMesh =  new THREE.Sprite(panelMate);
        panelMesh.position.set(-32 + model1XOffset, 8, -6);
        panelMesh.scale.set(6, 4, 1);
        scene.add(panelMesh);
      });
    })
  });

  scene.add(transformerGroup);
},

最终效果


PS：项目源码及3d模型会在第三篇文章给出下载地址，或者添加wx：z13964122832备注“变电站源码”