I am working on creating some texts onscreen and I have encapsulated the logic for that in a method.
I am calling this method on two different occasions - when the font is loaded and when another value on the component is changed. (This is always happening after the first occasion, so the font is loaded. I have even added a check for that).
The first time it works like a charm - the text is there. But when I call in the other scenario, the TextGeometry vertices is an empty array and thus the bounding box is being computed with the default params and nothing is being shown.
private addNumberInCell(number: number, bordersLengthLeftPart: number, index: number, addTemp) {
if (!this.font) {
return;
}
const textGeometry = new TextGeometry(number === undefined? '' : number.toString(), {
font: this.font,
size: 0.7,
height: 0,
});
textGeometry.computeBoundingBox();
const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
const textHeight = textGeometry.boundingBox.max.y - textGeometry.boundingBox.min.y;
const xOffset = this.borderPadding + bordersLengthLeftPart - textWidth / 2
const yOffset = -textHeight / 2
textGeometry.translate( xOffset, yOffset, 0);
const material = new THREE.MeshBasicMaterial({ color: 0x000000 });
const textMesh = new Mesh(textGeometry, material);
const xPosition = index * (this.rectWidth + this.borderPadding) + this.rectWidth / 2;
const yPosition = !addTemp ? this.defaultYCellPosition : this.defaultYCellPosition + this.rectWidth;
textMesh.position.set(xPosition, yPosition, 0);
this.scene.add(textMesh);
}