在 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-coordinates 是为基础几何体生成的。

Answer 2

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

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

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

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

或者，您可以使用此处显示的新 fat-lines 实现：https://threejs.org/examples/?q=line#webgl_lines_fat or the MeshLine implementation from here: https://github.com/spite/THREE.MeshLine，但我觉得那些不是您要找的...

在 Three.js 中向弯曲路径添加宽度

Adding Width to a Curved Path in Three.js

javascript

curve

path

three.js