伪造函数generateTexture（）

Question

在以下示例中，有一个名为Inconsolata的函数。

是否可以在像素数组中绘制文本（数字）？或者是否可以在该着色器上绘制文本（数字）？

我们的目标是画一个带有数字的圆圈。

https://forge.autodesk.com/blog/using-dynamic-texture-inside-custom-shaders

更新 我们注意到每个圈子都不能使用唯一的generateTexture()。每个结果都使用generateTexture()结果。每个对象唯一可以自定义的是颜色，以及使用的纹理。

我们可以为此创建一个解决方法，即生成从0到99的每个纹理，然后让每个对象根据我们想要显示的数字选择正确的纹理。我们不知道这是否足够有效以便正常工作。否则，它可能必须是0到9+或那个方向的东西。任何关于我们更新的问题的指南都将非常感激。感谢。

Answer 1

我能够使用以下代码成功显示文字，只需将 generateTexture（） 替换为 generateCanvasTexture（） 在示例中，您应该得到以下结果：

const generateCanvasTexture = () => {

  const canvas = document.createElement("canvas")
  const ctx = canvas.getContext('2d')

  ctx.font = '20pt Arial'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(new Date().toLocaleString(),
    canvas.width / 2, canvas.height / 2)

  const canvasTexture = new THREE.Texture(canvas)

  canvasTexture.needsUpdate = true
  canvasTexture.flipX = false
  canvasTexture.flipY = false

  return canvasTexture
}

Answer 2

It is possible but you would need to implement it yourself. Shaders are a pretty low level feature so there is no way to directly draw a number or a text, but you can convert a given character into its representation as a 2d pixel array.