Sprite

• Only SpriteMaterial works; mesh materials produce no visible result.
• center is a Vector2 anchor, with (0.5, 0.5) centered and (0, 0) at the bottom left.
• sizeAttenuation false keeps a fixed pixel size regardless of distance.

function makeLabel(text) {
  const canvas = document.createElement('canvas');
  canvas.width = 256;
  canvas.height = 64;

  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(13, 17, 23, 0.82)';
  ctx.fillRect(0, 0, 256, 64);
  ctx.strokeStyle = '#4f9ef8';
  ctx.lineWidth = 3;
  ctx.strokeRect(1.5, 1.5, 253, 61);

  ctx.fillStyle = '#e6e8ec';
  ctx.font = '600 30px sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, 128, 34);

  const texture = new THREE.CanvasTexture(canvas);
  texture.colorSpace = THREE.SRGBColorSpace;

  const sprite = new THREE.Sprite(new THREE.SpriteMaterial({
    map: texture,
    transparent: true,
    depthWrite: false
  }));
  sprite.scale.set(8, 2, 1);   // 8 : 2 与画布 256 : 64 同比例
  return sprite;
}

material.sizeAttenuation = false;
sprite.scale.set(0.08, 0.02, 1);   // 此时数值只表达相对比例
material.depthTest = false;
sprite.renderOrder = 10;

• Sprite ignores lookAt() because the renderer forces it toward the camera.
• raycast() tests the quad bounds, not alpha pixels, so transparent corners still hit.