实现思路
通过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);