Function to generate text similar to makeTextSprite but for static text

Resources
1

Hey everyone, how are you doing?

I was here making a chart, and I’ve used a lot of times text resources.

I don’t really know if it was necessary making a function for that, but it made things easier for me.

Inpired on the makeTextSprite from stemkoski I made a function to generate text for me, where I can set some parameters.

You can see it in a live example right here

image
image929×515 75.6 KB

Here is the code, and also examples of how to use it to generate the texts on the image above.

function generateText(message, parameters) {

    let text;

    fontLoader.load('font/gentilis_regular.typeface.json', function(font) {

        const opacity = parameters.hasOwnProperty("opacity") ?
            parameters["opacity"] : 1;

        if (parameters === undefined) parameters = {};

        const color = parameters.hasOwnProperty("color") ?
            parameters["color"] : 0x006699;

        const matLite = new THREE.MeshBasicMaterial({
            color: color,
            side: THREE.DoubleSide,
            transparent: true,
            opacity: opacity
        });

        var fontsize = parameters.hasOwnProperty("fontsize") ?
            parameters["fontsize"] : 2;

        const shapes = font.generateShapes(message, fontsize);

        const geometry = new THREE.ShapeGeometry(shapes);

        geometry.computeBoundingBox();

        const xMid = -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);

        geometry.translate(xMid, 0, 0);

        text = new THREE.Mesh(geometry, matLite);

        scene.add(text);

        var x = parameters.hasOwnProperty("x") ?
            parameters["x"] : text.position.x;

        var y = parameters.hasOwnProperty("y") ?
            parameters["y"] : text.position.y;

        var z = parameters.hasOwnProperty("z") ?
            parameters["z"] : text.position.z;

        var rotx = parameters.hasOwnProperty("rotx") ?
            parameters["rotx"] : text.rotation.x;

        var roty = parameters.hasOwnProperty("roty") ?
            parameters["roty"] : text.rotation.y;

        var rotz = parameters.hasOwnProperty("rotz") ?
            parameters["rotz"] : text.rotation.z;

        var name = parameters.hasOwnProperty("name") ?
            parameters["name"] : 'createdText';

        var countZ = parameters.hasOwnProperty("countZ") ?
            parameters["countZ"] : '---';

        text.position.set(x, y, z)
        text.rotation.set(rotx, roty, rotz)
        text.name = name;
        text.countZ = countZ;
    });
}

I would appreciate any comments: suggestions for improvements, criticism…

It helped me a lot, hope it can help someone else.
Best regards…

1 Like