如何在Three.js场景中添加2D实时动态文本？

Question

我需要一个更好的解决方案来添加2d文本到我的three.js场景。我尝试过使用TextGeometry，但我不能实时更新文本(以一种不会影响性能的方式)，而且我不想绘制三角形。有没有人知道有什么库或替代方案可以将2d文本添加到场景中？我需要能够方便地实时更新文本。如果你知道一个库，如果你能提供一个代码示例，我将不胜感激。谢谢。

Answer 1

我做了更多的研究，找到了这个library。我能够毫不费力地将其集成到我的项目中。它完全按照我的需要工作。

Answer 2

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

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。

Answer 3

如果你正在使用webgl(webgl2)上下文，你必须创建新画布，在那里写你的文本(在2d上下文中)，然后把你的画布变成img，然后使用这个img，这是一个最好的解决方案，所有的框架都使用它