Can I set max-width on sprite text? + Web GL Warning

[yesyunyun]

Hi, your libraries give my project great optimization achievement. Thanks a lot! I leave a message to you to ask about the way to set max-width on sprite text. I'm trying to figure out it, but I don't have any idea.

I find the innerWidth option in your source code, but I don't know how to handle it. May I suggest this function if there's no way to control it?

Plus,

I'm faced with WebGL Warning with spriteText. I use it with 3d-force-graph, the latest version of three js.

It is not a problem of running it, but I want to solve the console warning. The comment is in below.

---

(6) WebGL: INVALID_VALUE: texImage2D: no canvas (250+) [.WebGL-0x7fc23f64c200]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)? () WebGL: too many errors, no more errors will be reported to the console for this context

My code is here.

function addSpriteText(text, color){
    var spriteText = new SpriteText(text);
    spriteText.material.depthWrite = false;
    spriteText.color = hexToRgb(color);
    spriteText.material.opacity = 1;
    if(window.innerWidth < 480){
        spriteText.textHeight = .5;
    }else{
        spriteText.textHeight = .7;
    }

    return spriteText;
}

function objGenerator(node){
    var group = new THREE.Group();

    if (node.level == 0) {
        var groupText = addSpriteText(node.path, `#ffffff`);
            groupText.center.y = 8;
            groupText._fontsize = 20;
        group.add(groupText);
                // 6 items
    }else{
        var nodeSpriteText = addSpriteText(node.leaf, `${textGroupColor(node)}`);
                //textGroupColor returns just rgb color
        nodeSpriteText.position.z = .5;
        group.add(nodeSpriteText);
                // 200+ items
    }

    return group;
}

[yesyunyun]

I solved the last question about webGL warning -> no canvas, render warning. I've got an idea that it may not have the data.

[vasturiano]

@yunison thanks for reaching out.

This option doesn't currently exist. The border box is formed around the shape of the text that is input into the component. However, may I ask what would be your visual expectation of what should happen if the max-width set would not be sufficient to show the full text?

Keep in mind you can already control this to some extent either by trimming the input string, or adding newlines to wrap the text, like in this example: https://github.com/vasturiano/three-spritetext/blob/b547b888f5a725f9565906741f96a786c18db70d/example/basic/index.html#L37

[yesyunyun]

Thanks for the reply!

I'm working on a project that prints the whose name of the participants of the exhibition. So I needed to know the way to print the string without trimming it.

My visual expectation of using the max-width is to add a new line when the text(applied the font size) is over its bounding box's width.

I didn't find out the existence of "MultilineText" using "\n" at the time. Now I know it can use "\n" thanks for your reply.

Although it does not break the line by the bounding box width, I made the function breaking the line by the length of the word.

You can see the example on my codepen.

Thanks for the help.