javascript - 如何向 Three.js 场景添加 2D 实时动态文本？

Question

我需要一个更好的解决方案来将 2d 文本添加到我的 Three.js 场景中。我尝试过使用 TextGeometry，但无法实时更新文本(以不会损害性能的方式)，而且我不想绘制三 Angular 形。 有谁知道有哪些库或替代解决方案可以将 2d 文本添加到场景中？我需要能够轻松地实时更新文本。如果您知道一个库，如果您能提供代码示例，我将不胜感激。谢谢。

Answer 1

您可以使用 CanvasTexture，它支持可更新的 Canvas 作为源。

var canvas = document.createElement("canvas");
canvas.width = 128;
canvas.height = 128;
var ctx = canvas.getContext("2d");
var texture = new THREE.CanvasTexture(canvas);
var material = new THREE.MeshBasicMaterial( { map: texture } );

let i = 0;
setInterval(() => {
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, 128, 128);
  ctx.fillStyle = "black";
  ctx.font = "80px sans-serif";
  ctx.fillText(i, 50, 90);
  texture.needsUpdate = true;
  i++;
}, 1000);

查看这支笔的全部内容:https://codepen.io/dawken/pen/YzydEza?editors=1000

您可以使用面向相机的平面而不是立方体来使其看起来像 2D。