Question

我正在使用ThreeJS构建3D环境，其中相机处于固定位置，但用户可以使用指针锁定控件“环顾/移动相机”。

对象出现在3D环境中的随机位置。我在每个对象旁边放了一个单词。这个词是一个2D精灵，因为它应该始终面向用户，即使他开始环顾四周。

这是我用于文本精灵的代码：

function makeTextSprite(message, parameters) {
  var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial";
  var fontsize = 65;
  var borderThickness = 0;

  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  context.font = fontsize + "px " + fontface;
  var metrics = context.measureText(message);
  var textWidth = metrics.width;

  context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")";
  context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")";

  context.lineWidth = borderThickness;
  roundRect(context, borderThickness / 2, borderThickness / 2, (textWidth + borderThickness) * 1.1, fontsize * 1.4 + borderThickness, 8);

  context.fillStyle = "rgba(" + textColor.r + ", " + textColor.g + ", " + textColor.b + ", 1.0)";
  context.fillText(message, borderThickness, fontsize + borderThickness);

  var texture = new THREE.Texture(canvas);
  texture.needsUpdate = true;

  var spriteMaterial = new THREE.SpriteMaterial({
    map: texture,
    useScreenCoordinates: false
  });
  var sprite = new THREE.Sprite(spriteMaterial);
  sprite.scale.set(0.5 * fontsize, 0.25 * fontsize, 0.75 * fontsize);
  return sprite;
}

这很好用，但是我希望文本具有相同的大小，无论对象在何处，都是浏览器宽度的百分比。在上面的代码中，文本总是具有相同的大小，但是当它远离相机时，它显示更小，这是我不想要的。

任何人都知道如何实现这一目标？提前谢谢！

ThreeJS中的2D文字大小

0 个答案: