使用threejs和canvas创建中文文字精灵

╰+攻爆jí腚メ 2022-10-11 12:21 221阅读 0赞

在 `threejs` 和 `jquery` 的支持下，可以在三维空间里创建文字精灵，精灵模型始终面向用户，支持中文。参考代码如下：

// 创建文字精灵
    var getTextCanvas = function ( text, opt ) { 
    
        var option = { 
            fontFamily: 'Microsoft Yahei',
            fontSize: 40,
            fontWeight: 'normal',
            lineHeight: 1.4,  // g 字符的空间
            color: '#000000',
    
            borderWidth: 4,
            borderRadius: 6,
            borderColor: 'transparent',
            backgroundColor: 'transparent',
        }, canvas, context, textWidth, texture, materialObj, spriteObj;
    
        $.extend( option, opt );
    
        canvas = document.createElement('canvas');
        context = canvas.getContext('2d');
        context.font = option.fontWeight + ' ' + option.fontSize + 'px ' + option.fontFamily;
        textWidth = context.measureText( text ).width;
    
        context.fillStyle  = option.backgroundColor;
        context.strokeStyle = option.borderColor;
        context.lineWidth = option.borderWidth;
        setBackground(context, option.borderWidth * 0.5, option.borderWidth * 0.5, textWidth + option.borderWidth,
            option.fontSize * option.lineHeight + option.borderWidth, option.borderRadius);
    
        context.fillStyle = option.color;
        context.fillText(text, option.borderWidth, option.fontSize + option.borderWidth);
    
        texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        materialObj = new THREE.SpriteMaterial({ 
            map: texture, color: 0xffffff
        });
        spriteObj = new THREE.Sprite( materialObj );
        spriteObj.scale.set(30, 20, 20);
    
        function setBackground(ctx, x, y, w, h, r) { 
    
            ctx.beginPath();
            ctx.moveTo(x+r, y);
            ctx.lineTo(x+w-r, y);
            ctx.quadraticCurveTo(x+w, y, x+w, y+r);
            ctx.lineTo(x+w, y+h-r);
            ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
            ctx.lineTo(x+r, y+h);
            ctx.quadraticCurveTo(x, y+h, x, y+h-r);
            ctx.lineTo(x, y+r);
            ctx.quadraticCurveTo(x, y, x+r, y);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
    
        }
    
        return spriteObj;
    
    }