title: convert bezier into a plane road in three.js
body: <p>I am trying to draw a curved road in three.js from some beziers I get with previous calculations, the problem is that I can't find the way to convert the sequence of curved lines (one starting at the end of the previous one) to a curved plane.</p>
  
  <p>I have a 3D scene where there are some cars, a road created with a plane and the path of the coming road is painted. I use that Bezier curves I said to represent the path as a Line with</p>
  
  <pre><code>function createAdasisBezier(initx, inity, cp1x, cp1y, cp2x, cp2y, finalx, finaly) {
    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)
    );
    curvePath = new THREE.CurvePath();
    curvePath.add(bezier);
  
    var geoPath = curvePath.createPointsGeometry( 5 );
    var lineMat = new THREE.LineBasicMaterial({color: 0xff0000});
  
    curveLine = new THREE.Line(geoPath, lineMat);
  
    curveLine.rotation.set(-Math.PI/2,0,0);
    curveLine.position.y = 0.1;
  
    scene.add(curveLine);
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/nTwmx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nTwmx.png" alt="The result is this one"></a></p>
  
  <p>First, I tried <strong>extruding</strong> the line, but then I realized that it might not be the solution because I wanted to do a road, and although I could move top vertices on X and Y to place them near the bezier in order to be the external part of the curve, the result was not only unfavourable, it also made impossible to preserve a relation between a left and a right curve.</p>
  
  <p>To move vertices (once identified) I did a loop and move them manually:</p>
  
  <pre><code>for (var i = 0; i &lt; geoPath.vertices.length; ++i) {
    geoPath.vertices[i].y += 10;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/eRoUd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eRoUd.jpg" alt="Moving vertices right"></a>
  Bevel is not enabled in the extude.</p>
  
  <p>Then I tried to draw a plane over each bezier (as a child of them) and rotate it to face the path, but the result was not as I expected, and it if it were, it would spoil the arcs of the curves.</p>
  
  <p>To do it, I created a copy of every bezier, and place it aside the original ones, then I created the plane.</p>
  
  <pre><code> var plane = new THREE.PlaneBufferGeometry(10,25,1,1);
   var planemesh = new THREE.Mesh(plane, material);
   planemesh.position.set(copy.geometry.vertices[0].x, copy.geometry.vertices[0].y, 0);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/hKpue.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hKpue.jpg" alt="enter image description here"></a></p>
  
  <p>Last thing I was trying to do is creating a clone of the line, separate it some meters and "connect" the first vertex from one, to the first of the other, so I get a closed geometry, and I can create a Face, but I don't find how to <strong>"connect"</strong> vertices from 2 different geometries. I tried adding the vertex from one to the other, but it did not work.</p>
  
  <p>Does anybody have an idea how could I convert the line into a curved road? Thanks in adcance.</p>