Dynamically create 2D text in three.js

Question

I have 3D model which I have created in three.js. Based on some data, I want to create a set of arrows which is decorated by a small text label. These labels should be in 2D

Answer 1

You can create a 2d canvas and use css to position it to the top of your webgl canvas. Then you can draw text on it using the ctx.fillText(text,x,y) or ctx.strokeText(text,x,y) methods provided by the 2d canvas context. By using this method you can draw other things besides text, such as arrows and meters.

You can use the method as suggested by @kronuus to convert a point from 3d to 2d space.