And this code, produces the screenshot below???
The difference here is that I have made the width of the texture fixed at 30, and changed the font size to 120 to make the text fit inside the texture.
I have absolutely no idea how that make sense.
var makeTextPlane = function(text, color, size)
{
// size is an arbitrary multiplier that scales the entire model. Useful for controlling
// the actual visual experience of fog
// textSizer is a div with { width: fit-content }
nodes.textSizer.text(text);
// This calculation seems to give the right width to convert from the div width to the 3d space width
let textLength = 3 * size;//(nodes.textSizer.width()/size)*2;
let textureWidth = textLength;
let textureHeight = size * 2;
let plane = BABYLON.MeshBuilder.CreatePlane("plane", {"height": textureHeight, "width": textureWidth}, scene);
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);//),{"height": 10, "width": 1000});
var text1 = new BABYLON.GUI.TextBlock();
text1.text = text;
// text1.resizeToFit = true;
// text1.background ="yellow";
text1.outlineColor = "white";
text1.outlineWidth = size;
text1.color = "white";
text1.fontSize = 12*size;
text1.fontFamily = "Courier Prime";
// text1.fontWeight = "bold";
// text1.width = textureWidth;
// text1.height = textureHeight;
// text1.resizeToFit = true;
advancedTexture.addControl(text1);
// advancedTexture.rootContainer.scaleX = window.devicePixelRatio;
// advancedTexture.rootContainer.scaleY = window.devicePixelRatio;
// plane.lookAt(camera.position);
return plane;
};
