- three.js使用Sprite精灵实现文字或者图片广告牌
- 1.将文字绘制到Canvas，调整对应宽高。
- 2.作为Cavans材质绑定到Sprite
- 3.加载到场景调整适当的scale
function createLabel({ text, fontSize, textColor, color, imageUrl }) {
return new Promise((resolve, reject) => {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.font = `${fontSize}px Arial`;
let textWidth = context.measureText(text).width;
canvas.width = Math.ceil(textWidth);
canvas.height = Math.ceil(fontSize * 1.5);
context.font = `${fontSize}px Arial`;
if (color) {
context.fillStyle = color;
context.fillRect(0, 0, canvas.width, canvas.height);
}
let drawText = (imgHeight = 0) => {
context.textBaseline = 'middle';
context.textAlign = 'center';
context.fillStyle = textColor;
context.fillText(text, canvas.width / 2, (canvas.height + imgHeight) / 2);
// context.fillText(text, canvas.width / 2, canvas.height - fontSize / 2);
resolve(canvas);
};
if (imageUrl && imageUrl !== '') {
let image = new Image();
image.crossOrigin = "anonymous";
image.onload = function() {
let scale = textWidth / image.width;
let imageHeight = image.height * scale;
canvas.height += imageHeight;
context.drawImage(image, 0, 0, image.width * scale, imageHeight);
context.font = `${fontSize}px Arial`;
drawText(imageHeight);
};
image.onerror = reject;
image.src = imageUrl;
} else {
drawText();
}
});文章来源：https://www.toymoban.com/news/detail-785968.html
}文章来源地址https://www.toymoban.com/news/detail-785968.html
到了这里，关于web3d-three.js场景设计器-sprite广告牌的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
