Utilizing the function "MakeTextSprite" from
function createTextSprite(message, parameters) {
if (parameters === undefined) parameters = {};
var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Helvetica";
var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18;
var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 0;
var borderColor = parameters.hasOwnProperty("borderColor") ? parameters["borderColor"] : {
r: 0,
g: 0,
b: 0,
a: 1.0
};
var backgroundColor = parameters.hasOwnProperty("backgroundColor") ? parameters["backgroundColor"] : {
r: 255,
g: 255,
b: 255,
a: 1.0
};
var textColor = parameters.hasOwnProperty("textColor") ? parameters["textColor"] : {
r: 0,
g: 0,
b: 0,
a: 1.0
};
var canvas = document.createElement('canvas');
var WIDTH = 400;
var HEIGHT = 150;
canvas.width = WIDTH;
canvas.height = HEIGHT;
var context = canvas.getContext("2d", {alpha:false});
context.font = fontsize + "px " + fontface;
var metrics = context.measureText(message);
var textWidth = (metrics.width);
context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")";
context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")";
context.lineWidth = borderThickness;
roundRect(context, borderThickness / 2, borderThickness / 2, (textWidth + borderThickness) * 1.1, fontsize * 1.4 + borderThickness, 8);
context.fillStyle = "rgba(" + textColor.r + ", " + textColor.g + ", " + textColor.b + ", 1.0)";
context.fillText(message, borderThickness, fontsize + borderThickness);
var texture = new THREE.Texture(canvas, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.NearestFilter);
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial({
map: texture,
useScreenCoordinates: false,
transparent: false,
});
var sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(30, 15, 0);
return sprite;
}
enter code here
I instantiated my Sprite using this method:
Array[i] = createTextSprite(Array[i].name, {
fontsize: 100,
borderColor: {
r: 255,
g: 255,
b: 255,
a: 1.0
},
backgroundColor: {
r: 255,
g: 255,
b: 255,
a: 1
}
});
I wanted to modify the Width property. Setting it to 1000 caused the canvas to shrink in SpriteMaterial. Thus, the size of my Sprite remains constant.
Furthermore, the font appears pixelated and I have been unsuccessful in trying to smooth the font.