threejs中绘制文字

实现思路

通过canvas绘制自定义贴图，然后将贴图绑定到point上实现绘制文字的功能

//创建canvas对象用来绘制文字
let position = {x:0,y:0,z:0};
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255,255,250)";
ctx.font = "bolder 16px Arial ";

ctx.fillText("35KV", 130, 55);
ctx.globalAlpha = 1;

// 将画布生成的图片作为贴图给精灵使用，并将精灵创建在设定好的位置
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
//创建精灵，将该材质赋予给创建的精灵
let spriteMaterial = new THREE.PointsMaterial({
   map: texture,
   // sizeAttenuation: true,
   // size: 30,
   transparent: true,
   opacity: 1,
});
//创建坐标点，并将材质给坐标
let geometry = new THREE.BufferGeometry();
let vertices = [0, 0, 0];
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
let sprite = new THREE.Points(geometry, spriteMaterial);
sprite.position.set(position.x, position.y, position.z);
scene.add(sprite);