threejs sprite 制作标签

sprite 制作标签的优点就是无论旋转到什么角度，sprite所制作的标签上的文字都是正对着相机。
实现思路： 通过canvas生成图片，然后设置精灵纹理贴图。

// 制作区域标签 使用精灵图
function showSign(wid, hgt, textword, ww, wh, cvsPosition) {
//用canvas生成图片
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
canvas.width = wid //100
canvas.height = hgt //50
//制作矩形
ctx.fillStyle = "rgba(140, 141, 142,0.8)";
ctx.fillRect(0, 0, 100, 50)
//设置文字
ctx.fillStyle = "#fff";
ctx.font = 'normal 20pt "楷体"'
//文字换行
ctx.fillText(textword, ww, wh)
//生成图片
let url = canvas.toDataURL('image/png');
var spriteMaterial = new SpriteMaterial({
map: new TextureLoader().load(url), //设置精灵纹理贴图
transparent: true, //开启透明(纹理图片png有透明信息)
});
// 创建精灵模型对象，不需要几何体geometry参数
var sprite = new Sprite(spriteMaterial);
sprite.scale.set(100, 30, 0); //精灵图大小
sprite.translateY(50);
sprite.position.set(...cvsPosition)
scene.add(sprite);
}

调用：
showSign(100, 50, '总部', 15, 35, [-200, 100, 0]);
showSign(100, 50, '仓库1', 15, 35, [0, 60, 0]);
showSign(100, 50, '仓库2', 15, 35, [200, 100, 0]);
showSign(100, 50, '仓库3', 15, 35, [50, 100, -400]);

效果图：