javascript - 在 Three.js 中为弯曲路径添加宽度

Question

我使用以下代码在 three.js 中创建了一条跑道形曲线:

var path = new THREE.Path();

    path.moveTo(150,50);
    path.lineTo(150,150);
    path.quadraticCurveTo(150,175,100,175);
    path.quadraticCurveTo(50,175,50,150);
    path.lineTo(50,50);
    path.quadraticCurveTo(50,25,100,25);
    path.quadraticCurveTo(150,25,150,50);

    var pathPoints = path.getPoints();

    var pathGeometry = new THREE.BufferGeometry().setFromPoints(pathPoints);
    var pathMaterial = new THREE.LineBasicMaterial({color:0xFF1493});

    var raceTrack = new THREE.Line(pathGeometry,pathMaterial);
    scene.add(raceTrack);

}

现在，轨道只是一条线，我想知道是否可以将轨道制作成具有宽度(仍然是 2D)的几何体，以便我可以为其添加纹理。

目前，路径看起来像这样:

我想要的是能够绘制相同的形状，但只是增加线条的宽度:

Answer 1

在 R91 中，three.js 添加了对三 Angular 线的支持。这种方法以可靠的方式使线宽大于 1px。

演示:https://threejs.org/examples/webgl_lines_fat.html

示例中没有应用纹理，但为底层几何体生成了 uv 坐标。