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]);
效果圖：
