ThreeJs通过canvas和Sprite添加标签

在3D场景中很多时候会用到给模型添加标签，以表示这个模型的代号，尤其是大量重复模型的时候，添加标签是为了更直观的看到场景中每个模型的数据和名称，比如在仓库中有很多货架，就会需要查看每个货架的编号，如果某个货架出问题便可以通过编号快速定位是哪一个货架。

这节就讲如何用sprite和canvas添加标签，之前有讲过Sprite绘制下雨的场景，是先加载图片，然后封装为Sprite对象，再随机放置到场景中，但是现在情况很显然不适合使用固定的图片，因为每个货架的名称是动态变化的，需要根据字符串实时生成一个Sprite，这里就用到了Canvas，可以先用canvas设置字符串并绘制成图片，再将图片放置到Sprite中并定位到模型的位置，基于模型的位置往上添加一定的高度，这样就完成了对模型的标识，下面提供核心代码

//传入模型的坐标轴和货架的高度
addShelfLabel(rackX,rackY,rackz,rack){
    //创建一个canvas元素
      const canvas = document.createElement('canvas');
    //新增一个2d的绘图对象
      const context = canvas.getContext('2d');
    //设置绘图对象汇总的字体演示
      context.font = 'bold 30px Arial';
    //设置绘制的样式
      context.fillStyle = '#1296db';
    //设置货架的名字以及在2D场景中位置
      context.fillText(rack.rackName, 10, 50);
    //通过threejs的贴图，将canvas的内容转化为贴图图片
      const texture = new THREE.Texture(canvas);
      texture.needsUpdate = true; // 确保纹理更新
     //将带有贴图的图片转为Sprite的材质
      const spriteMaterial1 = new THREE.SpriteMaterial({map: texture});
    //新建Sprite对象,并设置好贴图材质
      const sprite = new THREE.Sprite(spriteMaterial1);
     //设置sprite的位置为货架的xy，并给z轴新增10的高度
      sprite.position.set(rackX, rackY, rackz+10)
    //根据需要缩放sprite大小
      sprite.scale.set(25, 25, 1); //只需要设置x、y两个分量就可以
    //最后添加到场景中显示
      scene.add( sprite );
},

这种标签的好处是，从任何方向查看都是对着摄像机的