Showing the Intersect Plane

What we really need to be able to do is to visualize the intersect plane, that is, the curve that results by finding all the points on these cones that have the value z = 0.  I've tried and failed a couple of approaches: I was unable to have two WebGL applications showing in different canvases; and, while you weren't looking, I tried adding a plane to the model but the results weren't adequate.

So what we are going to do now is to add another event handler - for click this time - and this will switch between the "3D cone" and "2D conic section" modes.  All the rest of the functionality will work in both modes; you are just somewhat "in the dark" about what you are doing when you are in "intersect" mode.

Showing the Intersect

The basic approach we are going to use for this is to instruct the camera to only show a small amount of the full 3D space; everything else is hidden.  The camera has the feature to ignore everything that is too close or two far away, thus allowing the appearance of X-ray vision.  But by limiting our view to just around the z = 0 plane, we are able to see the intersection of the curve and the plane.  This is exactly what we were originally going to do in the right hand canvas; it's just that we are now doing it "modally" rather than in parallel; time-slicing rather than window-slicing if you like.

Because we have defined the camera to be at z = 99, we would like to define the view to be exactly 99.  However, when we do that, nothing shows up.  Instead, we have to define it to be "a little bit" either side of that exact amount.  The consequence of this is that the lines are not perfect lines but "a little bit fat" but this is just a demonstration, so I'm not that bothered.

We start by introducing a variable to remind us of which mode we are in:

var showIntersect = false;

Then we add an event handler to change between the modes:

onClick: function(e) {
  showIntersect = !showIntersect;
  if (showIntersect) {
    this.camera.near = 98.75;
    this.camera.far = 99.25;
  } else {
    this.camera.near = 10;
    this.camera.far = 200;
  }
  this.camera.update();
}

This first handles the event by inverting the value of showIntersect.  Then, if the value is now true, it limits the camera range to a very small window around the z axis (from z = -0.25 to z = 0.25), causing something approximating the intersection plane to be shown.  If the value is now false, it goes back to the approximate defaults of showing a wide range.

As with everything else, it is not sufficient to update these variables; it is necessary to call update() (on the camera this time), and then the next redraw event will change the image on the screen.

Summary

Although my previous attempts had met with failure, this approach to showing the intersect plane, while not perfect, was remarkably easy to implement.  The code can be checked out at SHOW_CONES_INTERSECT_PLANE.