TextFit and Three.js

General
,
1

Hi
After Flash EOL I try to make some Html templates(still searching and learning) and try to switch to 2.3 server , so one of most important tool I need, is manipulating text fields.
I believe I found a very good tool for that and I would like to share if you looking something similar [GitHub - STRML/textFit: A jQuery-free component that quickly fits single and multi-line text to the width (and optionally height) of its container.]

I found also this 3d library https://threejs.org/ but still I didnt manage to make it work. I see in other topic rrebuffo already made some tests can he give us some instructions or maybe share his basic template ? It will be very nice if we have some 3d dynamic text with caspar

thanks a lot

2

Looks promising, thanks for sharing.

3

I’ll share it later… performance was not great in some tests I’ve made and didn’t have the time to troubleshoot that and fix some issues like line height adjustments.

For text fitting I ended up using a custom lightweight function that shrinks both ways based on the container. I’ll have a look at the js file that I use for all my templates and see if everything there is shareable and post it.

4

Yes，the performance was not good and it affect the smooth of other js animation.So I write a function to let the text fit in the div’s weight and height,calculate the font size that best fit the div， and run it before other animation ,save the text size in an arry. when I need show the texts, just use the text size that calcuted before. This will get a better performance although it has some limit.
this is the clip that uses this function

5

Here you have that three.js example:

Add gsap.min.js from here to the js folder.

The example must be run from a webserver (like nginx or node.js) for it to work (external texture loading is not allowed from local filesystem templates)

1 Like
6

thanks a lot

1 Like