What are the steps to create parallel curves in three.js for road markings?

Question

What are the steps to create parallel curves in three.js for road markings?

My goal is to create parallel curved lines that run alongside each other. However, when I try to adjust their positions in one axis, the outcome is not what I expected.

The code I am using is fairly simple - it involves a bezier curve as the central path and clones with different materials for the sides.

var bezier = new THREE.CubicBezierCurve3(
                new THREE.Vector3(initx, inity, 0),
                new THREE.Vector3(cp1x, cp1y, 0),
                new THREE.Vector3( cp2x, cp2y, 0),
                new THREE.Vector3(finalx, finaly, 0)
                );

var curvePath = new THREE.CurvePath();
curvePath.add(bezier);

var path = curvePath.createPointsGeometry(5);
path.computeLineDistances();

var lineMat = new THREE.LineDashedMaterial({ color: 0xFFFFFF,
                                             dashSize: 3,
                                             gapSize: 2, 
                                             linewidth: 10});

var curveLine = new THREE.Line(path, lineMat);

curveLine.rotation.set(-Math.PI/2, 0, 0);
curveLine.position.y = 0.1;

var leftLine = curveLine.clone();
leftLine.material = matLine;

var rightLine = curveLine.clone();
rightLine.material = matLine;

leftLine.translateX(-3.5);
rightLine.position.set(3.5, 0, 0);

scene.add(curveLine);
scene.add(leftLine);
curveLine.add(rightLine);

Here is the current result: https://i.sstatic.net/r7Fi3.png

Now, examples of the desired outcome:

https://i.sstatic.net/YQq55.png https://i.sstatic.net/VDv2M.png https://i.sstatic.net/Otvqb.png

The last two images are from the Bezier.js library.

I believe that applying an offset to the curved line or drawing another line using the normals of the first one could solve the issue. However, I have been unable to find any relevant information on how to do this in the documentation. Drawing a line at a distance along the tangent axis might be a potential solution, but I am open to easier suggestions. Any ideas?

I looked into this resource, but it pertains to straight lines.

javascript three.js bezier curve

Answer 1

Answer №1

Finally, I accomplished it independently.

By computing the tangent and normal of the primary curve at its specific points using getTangent() and rotating it 90 degrees to derive the normal. By generating additional vertices for that normal through scalar multiplication of its values. Next, I determined the desired point from the normals in world coordinates and connected them to form a CatmullRomCurve3 Geometry:

for(var i = 0.0; i <= 1.0; i += 0.2){

    var point = curvePath.getPointAt(i);

    var tangent = curvePath.getTangent(i);
    var extension1 = new THREE.Vector3(tangent.x*2, tangent.y*2, 0);
    var extension2 = new THREE.Vector3(extension1.x*2, extension1.y*2, 0);

    var tangentGeometry = new THREE.Geometry();
    tangentGeometry.vertices.push(tangent, extension1, extension2);

    var tangentLine = new THREE.Line(tangentGeometry,greenMaterial);
    tangentLine.position.set(point.x, point.y, point.z);

    normal.updateMatrixWorld(); // VERY IMPORTANT

    var normal = tangentLine.clone();
    normal.rotateZ(Math.PI/2);

    var normalLastVertex = normal.geometry.vertices[2].clone();
    normalLastVertex.applyMatrix4(normal.matrixWorld); //convert to world coords.

    pointsArray.push(normalLastVertex); //for using them out of the loop

    curveLine.add(tangentLine);
    curveLine.add(normal);
}

I now have the final normals' vertices stored in the points array, so I need to construct the spline connecting them outside of the loop.

    var splineCurveOffsetLeft = new THREE.CatmullRomCurve3([

       new THREE.Vector3((pointsArray[0].x), pointsArray[0].y, 0),
       new THREE.Vector3((pointsArray[1].x), pointsArray[1].y, 0),
       new THREE.Vector3((pointsArray[2].x), pointsArray[2].y, 0),
       new THREE.Vector3((pointsArray[3].x), pointsArray[3].y, 0),
       new THREE.Vector3((pointsArray[4].x), pointsArray[4].y, 0),
       new THREE.Vector3((pointsArray[5].x), pointsArray[5].y, 0)           
    ]);
splineCurveOffsetLeft.type = 'catmullrom';
splineCurveOffsetLeft.closed = false;

var offsetGeometry = new THREE.Geometry();
offsetGeometry.vertices = splineCurveOffsetLeft.getPoints(6);

var offsetLine = new THREE.Line(offsetGeometry, cyanMaterial);

offsetLine.rotation.set(-Math.PI/2, 0, 0);
offsetLine.position.y=0.1;

scene.add(offsetLine);

Using the same approach for the other offset line with an inverted rotation, here is the outcome:

https://i.sstatic.net/DJO6X.png

Green = Tangents, Red = Normals, Cyan = Parallel curve

Answer 2

Finally, I accomplished it independently.

By computing the tangent and normal of the primary curve at its specific points using getTangent() and rotating it 90 degrees to derive the normal. By generating additional vertices for that normal through scalar multiplication of its values. Next, I determined the desired point from the normals in world coordinates and connected them to form a CatmullRomCurve3 Geometry:

for(var i = 0.0; i <= 1.0; i += 0.2){

    var point = curvePath.getPointAt(i);

    var tangent = curvePath.getTangent(i);
    var extension1 = new THREE.Vector3(tangent.x*2, tangent.y*2, 0);
    var extension2 = new THREE.Vector3(extension1.x*2, extension1.y*2, 0);

    var tangentGeometry = new THREE.Geometry();
    tangentGeometry.vertices.push(tangent, extension1, extension2);

    var tangentLine = new THREE.Line(tangentGeometry,greenMaterial);
    tangentLine.position.set(point.x, point.y, point.z);

    normal.updateMatrixWorld(); // VERY IMPORTANT

    var normal = tangentLine.clone();
    normal.rotateZ(Math.PI/2);

    var normalLastVertex = normal.geometry.vertices[2].clone();
    normalLastVertex.applyMatrix4(normal.matrixWorld); //convert to world coords.

    pointsArray.push(normalLastVertex); //for using them out of the loop

    curveLine.add(tangentLine);
    curveLine.add(normal);
}

I now have the final normals' vertices stored in the points array, so I need to construct the spline connecting them outside of the loop.

    var splineCurveOffsetLeft = new THREE.CatmullRomCurve3([

       new THREE.Vector3((pointsArray[0].x), pointsArray[0].y, 0),
       new THREE.Vector3((pointsArray[1].x), pointsArray[1].y, 0),
       new THREE.Vector3((pointsArray[2].x), pointsArray[2].y, 0),
       new THREE.Vector3((pointsArray[3].x), pointsArray[3].y, 0),
       new THREE.Vector3((pointsArray[4].x), pointsArray[4].y, 0),
       new THREE.Vector3((pointsArray[5].x), pointsArray[5].y, 0)           
    ]);
splineCurveOffsetLeft.type = 'catmullrom';
splineCurveOffsetLeft.closed = false;

var offsetGeometry = new THREE.Geometry();
offsetGeometry.vertices = splineCurveOffsetLeft.getPoints(6);

var offsetLine = new THREE.Line(offsetGeometry, cyanMaterial);

offsetLine.rotation.set(-Math.PI/2, 0, 0);
offsetLine.position.y=0.1;

scene.add(offsetLine);

Using the same approach for the other offset line with an inverted rotation, here is the outcome:

https://i.sstatic.net/DJO6X.png

Green = Tangents, Red = Normals, Cyan = Parallel curve

What are the steps to create parallel curves in three.js for road markings?

Answer №1

Similar questions

Is it possible to choose tags from a different webpage?

Adjust the color of a selected edge in Three.js

Minimization tools for compressing CSS and JavaScript documents

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

The content of the text does not align. Alert in React 16

In JavaScript, there is a missing piece of logic when iterating through an array to find

What is the best way to implement a delay in axios requests within a loop array?

Maximizing the potential of Angular forms through native FormData

Using Vue.js along with vuex and axios allows for data retrieval only upon the second load

Encountering a no-loops/no-loops eslint error in node.js code while attempting to utilize the for and for-of loops

How can I navigate between pages without losing the data entered in the form fields

Creating a React component with a reference using TypeScript

Resolving the Persistence Problem of Navigation Bar Fading In and Out

Confirming the accuracy of multiple fields in a form

Exploring the capabilities of the innovative Node's EventTarget class alongside ES6 modules

fullPage.js with linear scroll

Gathering the output from every function within an array of functions

How can I simulate mouse position in a UIWebView?

React component failing to update upon rerender

The Plupload internal version seems to be incorrect. The file is labeled as 2.3.9, however, the actual version within the file is 2.3