title: Generate Mesh from Points Three.js
body: <p>I'm trying to create a clickable shape in Three from a bunch of points that are generated by mouse click. </p>
  
  <p>This code is kind of working:</p>
  
  <pre><code>mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / player.width ) * 2 - 1;
  mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / player.height ) * 2 + 1
  
  raycaster.setFromCamera( mouse, camera );
  
  var objects = [];
  objects.push(selectedHotspot);
  
  var intersects = raycaster.intersectObjects( objects, true  );
  
  if ( intersects.length &gt; 0 ) {
      var point = new THREE.Mesh( new THREE.SphereGeometry(1, 1, 1), new THREE.MeshBasicMaterial( { color: 0x00ffff } ) );
      point.position.copy(intersects[0].point);
      scene.add(point);
      points.push(intersects[0].point);
  }
  
  var geometry = new THREE.Geometry();
  
  points.forEach( function( point ){
      geometry.vertices.push( point );
  });
  geometry.vertices.push( points[0] );
  
  geometry.faces.push( new THREE.Face3(0, 1, 2));
  
  // material
  var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
  
  // line
  var line = new THREE.Mesh( geometry, material );
  scene.add( line );
  hotspots.push( line );
  </code></pre>
  
  <p>The points get added, I can draw lines between them I just can't fill in the center so the mouse can detect it!</p>