在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增加了对三角线的支持。这种方法可以可靠的方式使线宽大于1px。

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

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

Answer 2

使用常规Line - 对象，无法实现此目的。

您可以尝试以下几个选项：

• 创建完整的＆＃34;赛道＆＃34;作为几何，包括内线和外线。我不知道你需要什么，但这可能是最正确的＆＃34;正确的＆＃34;做这样的事情的方式（使用这种方法，赛道在不同的点可以有不同的宽度，你可以控制弯曲和转弯的行为等等）。一个简单的例子：

  const shape = new THREE.Shape();
  
  shape.moveTo(150, 50);
  shape.lineTo(150, 150);
  shape.quadraticCurveTo(150, 175, 100, 175);
  shape.quadraticCurveTo(50, 175, 50, 150);
  shape.lineTo(50, 50);
  shape.quadraticCurveTo(50, 25, 100, 25);
  shape.quadraticCurveTo(150, 25, 150, 50);
  
  const innerShape = new THREE.Path();
  
  innerShape.moveTo(140, 40);
  innerShape.lineTo(140, 140);
  innerShape.quadraticCurveTo(140, 165, 90, 165);
  innerShape.quadraticCurveTo(60, 165, 60, 140);
  innerShape.lineTo(60, 50);
  innerShape.quadraticCurveTo(60, 35, 110, 35);
  innerShape.quadraticCurveTo(140, 35, 140, 60);
  
  shape.holes.push(innerShape);
  
  var raceTrack = new THREE.Mesh(
    new THREE.ShapeGeometry(shape),
    new THREE.MeshBasicMaterial({ color: 0xff1493 })
  );
  

  完整代码：https://codepen.io/usefulthink/pen/eMBgmE

• 或者，您可以使用此处显示的新胖线实现：https://threejs.org/examples/?q=line#webgl_lines_fat或此处的MeshLine实现：https://github.com/spite/THREE.MeshLine，但我感觉那些不是您正在寻找的为...