使用threejs和canvas创建中文文字精灵-蒲公英云

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

在 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;
}