Question

在查看three.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;
}

，然后每当我旋转相机时，文字始终面对相机。有什么办法可以防止这种情况

全力以赴

三种js-绘制文字和线条的最佳方法

0 个答案: