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