javascript - Three JS - Find all points where a mesh intersects a plane

Question

I have created a three.js scene that includes a plane that intersects a mesh. What I would like to do is get an array of points for all locations where an edge of the mesh crosses the plane. I have had a good look for solutions and can't seem to find anything.

Here is an image of what I currently have:

And here I have highlighted the coordinates I am trying to gather:

If anybody can point me in the right direction, that would be most appreciated.

Thanks,

S

Answer 1

This is not the ultimate solution. This is just a point where you can start from.

UPD: Here is an extension of this answer, how to form contours from given points.

Also, it's referred to this SO question with awesome anwers from WestLangley and Lee Stemkoski about the .localToWorld() method of THREE.Object3D().

Let's imagine that you want to find points of intersection of a usual geometry (for example, THREE.DodecahedronGeometry()).

The idea:

1. THREE.Plane() has the .intersectLine ( line, optionalTarget ) method

2. A mesh contains faces (THREE.Face3())

3. Each face has a, b, c properties, where indices of vertices are stored.

4. When we know indices of vertices, we can get them from the array of vertices

5. When we know coordinates of vertices of a face, we can build three THREE.Line3() objects

6. When we have three lines, we can check if our plane intersects them.

7. If we have a point of intersection, we can store it in an array.

8. Repeat steps 3 - 7 for each face of the mesh

Some explanation with code:

We have plane which is THREE.PlaneGeometry() and obj which is THREE.DodecahedronGeometry()

So, let's create a THREE.Plane():

var planePointA = new THREE.Vector3(),
  planePointB = new THREE.Vector3(),
  planePointC = new THREE.Vector3();

var mathPlane = new THREE.Plane();
plane.localToWorld(planePointA.copy(plane.geometry.vertices[plane.geometry.faces[0].a]));
plane.localToWorld(planePointB.copy(plane.geometry.vertices[plane.geometry.faces[0].b]));
plane.localToWorld(planePointC.copy(plane.geometry.vertices[plane.geometry.faces[0].c]));
mathPlane.setFromCoplanarPoints(planePointA, planePointB, planePointC);

Here, three vertices of any face of plane are co-planar, thus we can create mathPlane from them, using the .setFromCoplanarPoints() method.

Then we'll loop through faces of our obj:

var a = new THREE.Vector3(),
  b = new THREE.Vector3(),
  c = new THREE.Vector3();

  obj.geometry.faces.forEach(function(face) {
    obj.localToWorld(a.copy(obj.geometry.vertices[face.a]));
    obj.localToWorld(b.copy(obj.geometry.vertices[face.b]));
    obj.localToWorld(c.copy(obj.geometry.vertices[face.c]));
    lineAB = new THREE.Line3(a, b);
    lineBC = new THREE.Line3(b, c);
    lineCA = new THREE.Line3(c, a);
    setPointOfIntersection(lineAB, mathPlane);
    setPointOfIntersection(lineBC, mathPlane);
    setPointOfIntersection(lineCA, mathPlane);
  });

where

var pointsOfIntersection = new THREE.Geometry();
...
var pointOfIntersection = new THREE.Vector3();

and

function setPointOfIntersection(line, plane) {
  pointOfIntersection = plane.intersectLine(line);
  if (pointOfIntersection) {
    pointsOfIntersection.vertices.push(pointOfIntersection.clone());
  };
}

In the end we'll make our points visible:

var pointsMaterial = new THREE.PointsMaterial({
    size: .5,
    color: "yellow"
  });
var points = new THREE.Points(pointsOfIntersection, pointsMaterial);
scene.add(points);

jsfiddle example. Press the button there to get the points of intersection between the plane and the dodecahedron.