title: Three.js - PlaneGeometry from Math.Plane
body: <p>I am trying to draw a least squares plane through a set of points in Three.js. I have a <a href="https://threejs.org/docs/#api/math/Plane" rel="nofollow noreferrer">plane</a> defined as follows:</p>
  
  <pre><code>var plane = new THREE.Plane();
  plane.setFromNormalAndCoplanarPoint(normal, point).normalize();
  </code></pre>
  
  <p>My understanding is that I need to take that plane and use it to come up with a Geometry in order to create a mesh to add to the scene for display:</p>
  
  <pre><code>var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
  scene.add(dispPlane);
  </code></pre>
  
  <p>I've been trying to apply <a href="https://stackoverflow.com/questions/38665067/three-js-how-do-you-get-a-plane-from-a-vector-and-a-constant">this answer</a> to get the geometry. This is what I came up with:</p>
  
  <pre><code>plane.setFromNormalAndCoplanarPoint(dir, centroid).normalize();
  planeGeometry.vertices.push(plane.normal);
  planeGeometry.vertices.push(plane.orthoPoint(plane.normal));
  planeGeometry.vertices.push(plane.orthoPoint(planeGeometry.vertices[1]));
  planeGeometry.faces.push(new THREE.Face3(0, 1, 2));
  
  planeGeometry.computeFaceNormals();
  planeGeometry.computeVertexNormals();
  </code></pre>
  
  <p>But the plane is not displayed at all, and there are no errors to indicate where I may have gone wrong. </p>
  
  <p>So my question is, how can I take my Math.Plane object and use that as a geometry for a mesh? </p>