在 Three.js 中为弯曲路径添加宽度答案

【问题标题】：Adding Width to a Curved Path in Three.js在 Three.js 中为弯曲路径添加宽度
【发布时间】：2018-03-18 16:47:22
【问题描述】：

我用以下代码在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）的几何图形，以便我可以为其添加纹理。

目前，路径如下所示：

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

【问题讨论】：

标签： javascript path three.js curve

【解决方案1】：

使用常规的Line-objects，没有办法实现这一点。

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

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

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，但我觉得那些不是您想要的...

【讨论】：

【解决方案2】：

使用R91，three.js 增加了对三角线的支持。这种方法可以可靠地实现大于 1px 的线宽。

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

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

【讨论】：

万岁！最后，它被添加了。