three.js绘制二维文本失真

Question

图一
图二

var canvas = document.createElement("canvas")
var ctx = canvas.getContext("2d")
ctx.font = "Normal 30px Arial"
ctx.lineWidth = 1
ctx.fillStyle = "#00FF00"
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillText('绘制图形文字', 110, 100)

var texture = new THREE.Texture(canvas)
texture.needsUpdate = true
var material = new THREE.SpriteMaterial({ 
    map: texture,
    // useScreenCoordinates: false,
    transparent: true,
    // rotation: 50
})

var textObject = new THREE.Object3D()
var sprite = new THREE.Sprite(material)
sprite.scale.set(15, 15, 0)
sprite.position.set(-7, 13, 0)

上面代码是我做图一写的，希望能达到图二的效果，但是不知道怎么修改了，请大佬指教！

Answer 1

刚碰到这个问题，顺便注册解答下。

首先明确一点，canvas是一张图片，不像svg是矢量图，失真是因为canvas的分辨率低，比如你的canvas长宽都是100px，你把一张100X100的图片放大到整个屏幕这么大，肯定会失真的。

解决方案就是把canvas宽和高都设置到足够大，字体也随之放大，这样放大之后就不会失真了。

function getCanvasMesh(text, width, height, size, color) {
    const canvas = document.createElement('canvas');
    canvas.width = width * 1000;
    canvas.height = height * 1000;
    const context = canvas.getContext('2d');

    context.font = '500px \'微软雅黑\'';

    // const textWidth = context.measureText(text).width;

    context.fillStyle = '#00bffd';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText(text, canvas.width / 2, canvas.height / 2);

    const texture = new THREE.CanvasTexture(canvas);
    texture.needsUpdate = true;

    const material = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide
    });

    const mesh = new THREE.Mesh(new THREE.PlaneGeometry(width, height), material);

    return mesh;
}

下面图片是放大后的效果