title: How can I create a 3D surface from 3D points in Three.js?
body: <p>I'm making a project to make simple 3d models with dots and lines (curved or not). For a first version I used SVG elements for simple render, smooth curves and mouse events.</p>
  
  <p>Now I'm trying to use <strong>Three.js</strong> renderer instead of SVG. I got to create 3d tubes to replace the curved lines, but I don't know <em>how to create 3d surfaces based on multiple xyz coordinates</em>.</p>
  
  <p>Here is an example of a model made of 4 points and 4 lines (3 straights and 1 curved):</p>
  
  <p><a href="https://i.stack.imgur.com/eigSQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eigSQ.png" alt="surface-3d-sample1"></a></p>
  
  <p>We could imagine that the curve is extruded to more points, to something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/m0NIQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m0NIQ.png" alt="enter image description here"></a></p>
  
  <p>Then I would like to create a surface (or plane), just like the blue shape:</p>
  
  <p><a href="https://i.stack.imgur.com/Qn1mE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qn1mE.png" alt="enter image description here"></a></p>
  
  <p>I got inspired of this topic: <a href="https://stackoverflow.com/questions/45506426/convert-bezier-into-a-plane-road-in-three-js/45512912">convert bezier into a plane road in three.js</a></p>
  
  <pre><code>var material = new THREE.MeshBasicMaterial({ color: 0xc0c0c0 });
  var path = new THREE.CatmullRomCurve3([
      new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z),
      new THREE.Vector3(dots[1].x, dots[1].y, -dots[1].z),
      new THREE.Vector3(dots[2].x, dots[2].y, -dots[2].z),
      new THREE.Vector3(dots[3].x, dots[3].y, -dots[3].z),
      new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z)
  ]);
  
  var pts = [],
      a ;
  for (var i = 0 ; i &lt; 3 ; i++) {
      a = i / 3 * Math.PI;
      pts.push(new THREE.Vector2(Math.cos(a) * 1, Math.sin(a) * 1));
  }
  var shape = new THREE.Shape(pts);
  
  var geometry = new THREE.ExtrudeGeometry(shape, {
      steps : 10,
      bevelEnabled : false,
      extrudePath : path
  });
  
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  </code></pre>
  
  <p>But this sample code only creates another tube-like shape.</p>