Adjust TextGeometry's size to HTML element's size

Questions
1

I have some TextGeometry that is supposed to be a 1 to 1 representation of a HTML (h1) element:

export default class Title {
    constructor($el, $scene) {
        this.scene = $scene;
        this.title = $el.firstElementChild;

        this.offset = new THREE.Vector2(0, 0);

        const loader = new THREE.FontLoader();
        loader.load('/RL-Unno.json', (font) => {

            const geometry = new THREE.TextGeometry(this.title.innerHTML, {
                font: font,
                size: 150,
                height: 1
            });
            geometry.center();
            this.init(geometry);
        })
    }
...
}

As you can see, I already get the text from the html element this.tile itself. How do I also get it’s size? Currently size is set to 150, but since that’s not px whatsoever, I need a way to get the element’s size and adjust the geometry accordingly. How can I do so?

I know of this.title.style.fontSize, but again, this would return a value calculated in px, which would not conform to the geometry’s size attribute.

2

In JavaScript you can use the element’s clientHeight attribute. Just take care to note that this gives you the whole element’s height, so if the text wraps to three lines it’ll be approx 3x bigger than one line.

3

@Jim I think the OP is looking for a way to convert a CSS text size of e.g. 150px to a size value so the resulting text geometry has the same dimensions as it HTML pendant.

This can’t be easily implemented since the final size of the text mesh also depends on camera settings. Besides, I’m not sure about the unit of the size parameter. If it is undefined/unitless, it makes a conversion even more complicated.

4

Thanks, I assume you’re right and that it can’t be implemented easily. However, what would be the correct approach then to display a text with the same dimensions the html element has besides TextGeometry. There must be a way, right?

5

I don’t know sorry.

6

Found this post that calculates the font size based on length, I was able to get it to work for my project by increasing the baseSize. Hope it helps!