How to add 2D real time dynamic text to a Three.js scene?

user_10882023 0
Viewed 1349

I need a better solution to add 2d text to my three.js scene. I've tried using TextGeometry but I can't update the text in real-time (in a way that won't hurt performance) and I don't want to have to draw triangles. Does anyone know of any libraries or alternative solutions to add 2d text to a scene? I need to be able to easily update the text in realtime. If you know of a library I would greatly appreciate it if you could provide a code example. Thanks.

three.js 2d text javascript
3 Answers

I did some more research and found this library. I was able to integrate it into my project with no problems. It works exactly as I need it to.

user_108820230

You could use a CanvasTexture, which supports updateable canvases as sources.

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);

See this pen for the whole thing: https://codepen.io/dawken/pen/YzydEza?editors=1000

You could use a camera-facing plane instead of a cube to make it look 2D.

user_4157270

If you are use webgl(webgl2) context, you must create new canvas, write you're text there (in 2d context) and then turn you canvas to img, and use this img, this is a best solution and all frameworks use it

user_127035150
Related