web3d-three.js场景设计器-sprite广告牌

• 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();

        }

    });

}