在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 );
},
这种标签的好处是，从任何方向查看都是对着摄像机的
