如何在Three.js场景中添加二维实时动态文字？

Question

我需要一个更好的解决方案来为我的Three.js场景添加2D文本。我试过使用TextGeometry，但我不能实时更新文本（不会影响性能），而且我也不希望必须绘制三角形。有谁知道有什么库或替代方案可以将二维文本添加到场景中？我需要能够轻松地实时更新文本。如果你知道一个库，如果你能提供一个代码示例，我会非常感激。谢谢。

Answer 1

你可以使用一个 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.iodawkenpenYzydEza?editors=1000。

你可以用一个面向摄像头的平面来代替立方体来使它看起来是2D的。

Answer 2

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

Answer 3

我又做了一些研究，发现这个 图书馆. 我能够将其整合到我的项目中，没有任何问题。它完全按照我的需要工作。