Inline Text

[MaxTwentythree]

Hi, first of all many thanks for this great package!

I have a question regarding the troika-3d-text component:

Is there currently a possibility to add two or more TextMeshes such, that they are combined inline: How would I accomplish something like that?

[lojjic]

Thanks for the question, it's a good one. The answer is currently: Yes, but it's not documented, and you can only change colors. So you can't mix different fonts, font weights, or sizes. I definitely want to expand that capability in the future, so I'll leave this issue open as a feature request for tracking.

See here for how you'd use the current color support, noting that its API isn't frozen yet: https://github.com/protectwise/troika/blob/978ef534442ec159353c8aa4c0ebe45ac21b4189/packages/troika-3d-text/src/three/TextMesh.js#L192

So something like colorRanges: {0: 0x000000, 29: 0xff0000}

[MaxTwentythree]

Awesome! I already saw the colorRange prop .. good to know that this will be the way to go for other inline styles, too .. thank you!

[ghost]

@lojjic thanks for that information! Would it be possible to change the background color in certain ranges within the text as well?

Right now I'm thinking it's possible to do that by using getSelectionRects(textRenderInfo, start, end), and rendering rectangles behind the positions I find, or is there an easier way to do that?

[lojjic]

@william-mimura-thisdot I think getSelectionRects is the way to go for that.