Text getting bolder in TextGeometry

Questions
,
1

Hi,

I’m trying to create an axis with labels using threejs targeting AR environment using WebXR. However, I’m facing an issue related to label texts getting bolder along the axis as shown below. Here is the code that I used to generate the below axis ( Glitch :･ﾟ✧ ).

Appreciate any help regarding this.

Also, I’m wondering about existing chart libraries created for mobile browser-based AR environments. If you have any ideas, please let me know.

Thank you in advance.

image
image692×224 1.75 KB

2

Are you by any chance using PerspectiveCamera ?

TextGeometry has depth. When looking straight at the text, it’ll appear flat. But, due to perspective, as the text is further to the left or to the right - the side of the geometry will start showing, making it appear as if it was thicker. Either use OrthographicCamera to render the UI above the perspective-rendered world - or use something like troika or mesh ui to render flat text.

3

Hi,

Thanks for your quick reply.

I used PerspectiveCamera and changed it to OrthographicCamera but it seems like there is no difference. Exactly the TextGeometry’s depth is the issue here. So, I’ll try to render flat text as you mentioned.

By any chance, Do you know any existing chart library made for AR?

Thank you.

4

Hi,

I appreciate your assistance. I’ve developed an example showcasing the basic usage of text. You can find it here, created using mesh ui, to illustrate a simple text usage scenario.