Getting sizes of canvas objects

Hi :slight_smile:

I’m having a bit of trouble working on a component to get text wrap functionality within my canvas (I’m a bit of a novice with js and three). Basically, I need to get the width and height of the text so that I can iterate down through text sizes until it fits within the area of the shape the text is being applied to.

I have been trying to use .getSize to achieve the above, but I can’t get it to read.

My code is as below:

First creating a text object method:

function AddText(x, y, z, descriptor, size, height, loader, scene) {
loader.load(HELVETIKER_FONT_BASE64, function (font) {
        let textGeo = new THREE.TextGeometry(descriptor, { font: font, size: size, height: height });
        let textMat = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffffff });
        let texts = new THREE.Mesh(textGeo, textMat);
        texts.position.set(x, y, z);
        scene.add(texts);
        //console.log(textGeo.boundingBox.getSize(size));
    });
}

Next, the beginnings of my text wrap function:

let description = [];
function WriteToCanvas(event) {
    if (description.length > 0 && description.length % 9 != 0) {
        if (event.key !== "p") {
            description += event.key;
        }
        //else {
        //    description.pop();
        //}
    }
    else {
        description += "\n";
        description += event.key;
    }
    //if (description.length > 3) {
    return AddText(/*GetStringX(description)*/0, 0, 0, description.toString(), 10, 0.05, loader, scene);   
    
    //}
    //return null;
}

Finally, the text is placed within a keypress event listener

    window.addEventListener('keypress', WriteToCanvas);
    //console.log(WriteToCanvas().getSize());

Can anyone advise how and where I might be able to get the pixel height and length, such that I can modify the text size before placing? You can see my failed console log attempts throughout…