Hi
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…