Three.js 三个js-绘制文本和线条的最佳方式

在浏览了三个.js文档之后，我发现很难用笔划宽度和文本来画线

对于具有笔划宽度的线，我必须绘制一个矩形，并调整它，使其看起来像一条粗线

对于文本，只有两种选择，一种是使用字体加载器，我发现很难处理字体加载器的承诺，如果我有这么多的文本，速度会变慢

但是如果我用画布来绘制文本，然后用精灵来添加画布，那么每当我旋转相机时，我的文本都会保持旋转

现在是2018年了，有没有办法让三个js让生活更轻松

谢谢大家

创建粗曲线的代码

function curveLine(start, mid, end, width) {
    var curveLine = new THREE.Shape();
    curveLine.moveTo(start.x, start.y + width);
    curveLine.quadraticCurveTo(mid.x, mid.y + width, end.x, end.y + width);
    curveLine.lineTo(end.x, end.y);
    curveLine.quadraticCurveTo(mid.x, mid.y, start.x, start.y);
    curveLine.lineTo(start.x, start.y);
    return curveLine;
}
var line = curveLine({x:0,y:0}, {x:120,y:80}, {x:240,y:0}, 20);
var lineGeo = new THREE.ExtrudeGeometry(line, extrudeSettings);
var lineMesh = new THREE.Mesh(lineGeo, new THREE.MeshBasicMaterial({color: 'red'}));
scene.add(lineMesh);

这是我绘制文本的代码，当前使用画布绘制

function text2D(text, params) {
    var canvas = document.createElement('canvas');
    canvas.width = params.radius * 4;
    canvas.height = params.radius * 2;
    var context = canvas.getContext('2d');
    context.font = '20px Verdana';

    var metrics = context.measureText(text);
    var textWidth = metrics.width;
    context.fillStyle = params.color;
    context.fillText(text, (canvas.width - textWidth) / 2, params.radius);
    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;

    var spriteMaterial = new THREE.SpriteMaterial({map: texture});
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite.scale.set(canvas.width, canvas.height, 1);
    return sprite;
}

然后每当我旋转相机时，文字都会面向相机。有什么办法可以防止吗

---

欢迎大家

关于线宽，看看这个例子：问“什么是最好的…？”有可能得出自以为是的答案。（）有很多方法可以解决您描述的问题，从定义自己的线条笔划字符集，到将画布纹理绘制到平面（而不是精灵）。我建议您重新回答您的问题，以解决您在实现特定方法时遇到的问题（例如为什么使用字体加载器很慢），而不是撒网寻找替代解决方案。