3D texts in threejs scenes

MakeTextSprite_ThreeJS

// ref: https://bocoup.com/blog/learning-three-js-with-real-world-challenges-that-have-already-been-solved
function makeTextSprite(message, opts) {
  let parameters = opts || {};
  let fontface = parameters.fontface || 'Helvetica';
  let fontsize = parameters.fontsize || 20;
  let canvas = document.createElement('canvas');
  let context = canvas.getContext('2d');
  context.font = fontsize + "px " + fontface;
  context.textAlign = "center";
  context.textBaseline = "middle";

  // text color
  context.fillStyle = 'rgba(255, 255, 255, 1.0)';
  context.fillText(message, canvas.width/2, canvas.height/2);

  // canvas contents will be used for a texture
  let texture = new THREE.Texture(canvas)
  texture.minFilter = THREE.LinearFilter;
  texture.needsUpdate = true;

  let spriteMaterial = new THREE.SpriteMaterial({
      map: texture,
      useScreenCoordinates: false
  });
  let sprite = new THREE.Sprite(spriteMaterial);
  sprite.scale.set(100, 50, 1.0);
  return sprite;
}