Search code examples
javascriptpaththree.jscurve

Adding Width to a Curved Path in Three.js

I created a racetrack shaped curve in three.js with the following code:

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);

}

Right now, the track is just a single line, and I wanted to know if it was possible to make the track into a geometry with a width (still 2D) so that I can add a texture to it.

Currently, the path looks something like this:

1px wide path

What I'd like is to be able to draw the same shape, but just increase the width of the line:

5px wide path

Solution

  • With R91, three.js added support for triangulated lines. This approach enables line width greater than 1px in a reliable way.

    Demo: https://threejs.org/examples/webgl_lines_fat.html

    There are no textures applied on the example but uv-coordinates are generated for the underlying geometry.