vue中使用three，绘制3d场景--给模型增加文字标签

上一篇文章链接：点这里
完整代码点这里

实际需求中，模型总会有一个文字标签，解释模型相关的信息。
这里要用到的是：
精灵平面（Sprite）
精灵平面（Sprite）是一个在3D场景中总是面对着相机的平面。也就是无论你怎么旋转，你会发现他都朝向你哟，是不是很厉害的样子~
好的，现在开始给模型增加sprite：
（1）利用canvas绘制文字，作为sprite的材质

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
this.drawRect(context); // 绘制矩形
/* 字体颜色 */
context.fillStyle = "rgba(255,255,255,1)";
context.font = "16px bold";
/**文字 */
context.fillText("模型名称：", 10, 20);
context.fillText("我是模型", 100, 20);
context.fillText("模型：", 10, 40);
context.fillText("ABCDEFG", 100, 40);

绘制矩形函数：

    drawRect(ctx) {
      ctx.strokeStyle = "#0864ee";
      ctx.strokeRect(0, 0, 380, 170);
      ctx.fillStyle = "rgba(10,18,51,0.8)";
      ctx.fillRect(1, 1, 378, 168);
    }

（2）将canvas作为sprite的材质

      var texture = new THREE.Texture(this.createCanvas()); //就是上面的canvas，我将它写在一个函数中然后返回。
      texture.needsUpdate = true;

      var spriteMaterial = new THREE.SpriteMaterial({ map: texture });
      var sprite = new THREE.Sprite(spriteMaterial);
      sprite.scale.set(1.5, 1, 1); //大小缩放
      sprite.position.set(-10, 2, -2); //位置
      this.scene.add(sprite); //将其放入场景中

遇到的问题：
很明显能看到的是，文字失真了，很糊。
解决方法参考链接： https://www.html.cn/archives/9297

我这里就简单地对canvas进行了放大，修改上面的canvas：

      var canvas = document.createElement("canvas");
      var context = canvas.getContext("2d");
      canvas.width = 380 * 2;
      canvas.height = 170 * 2;
      context.scale(2, 2);
      this.drawRect(context);
      ...//其余代码同上