I am currently working on creating a curved road in three.js using bezier calculations. However, I am facing a challenge in converting the sequence of curved lines into a curved plane.
Within my 3D scene, I have cars, a road made from a plane, and a path representing the upcoming road. I utilize Bezier curves to outline the path as a Line using the following function:
function createAdasisBezier(initx, inity, cp1x, cp1y, cp2x, cp2y, finalx, finaly) {
// Function details to create Bezier curves
}
https://i.sstatic.net/nTwmx.png
Initially, I attempted to extrude the line, but soon realized that it did not suit the road creation. Moving the top vertices on X and Y to align with the bezier caused unfavorable results and disrupted the curve harmony.
To adjust vertices individually, I implemented a loop:
for (var i = 0; i < geoPath.vertices.length; ++i) {
geoPath.vertices[i].y += 10;
}
https://i.sstatic.net/eRoUd.jpg Beveling was disabled during the extrusion process.
Next, I attempted to place a plane over each bezier as a child element, but the outcome was not satisfactory. I then experimented with creating a copy of each bezier, adjusting their positioning, and adding a plane.
var plane = new THREE.PlaneBufferGeometry(10,25,1,1);
var planemesh = new THREE.Mesh(plane, material);
// Additional details for positioning the plane
https://i.sstatic.net/hKpue.jpg
My latest approach involves creating a clone of the line, separating it, and attempting to "connect" the vertices to form a closed geometry. Yet, I am struggling to merge vertices from different geometries successfully.
If anyone has any insights on how to transform the line into a curved road, I would greatly appreciate it. Thank you in advance.