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

Update THREE.js r.146

Sharing complete example using BufferGeometry since Geometry is deprecated since r.125, while following the wonderful example of @prisoner849 and discourse thread Plane intersects mesh with three.js r125

Example includes clipping the geometry based on the intersection points which are used to generate the LineSegments.

Can also instead create a Plane from the PlanarGeometry Quanternion and Normal

let localPlane = new THREE.Plane();
let normal = new THREE.Vector3();
let point = new THREE.Vector3();

normal.set(0, -1, 0).applyQuaternion(planarGeometry.quaternion);
point.copy(planarGeometry.position);
localPlane.setFromNormalAndCoplanarPoint(normal, point).normalize();**

Function updates Lines with current intersection based on the current position of the PlanarGeometry

let lines = new THREE.LineSegments(
  new THREE.BufferGeometry(),
  new THREE.LineBasicMaterial({
    color: 0x000000,
    linewidth: 5
  })
);

function drawIntersectionLine() {
  let a = new THREE.Vector3();
  let b = new THREE.Vector3();
  let c = new THREE.Vector3();

  const isIndexed = obj.geometry.index != null;
  const pos = obj.geometry.attributes.position;
  const idx = obj.geometry.index;
  const faceCount = (isIndexed ? idx.count : pos.count) / 3;

  const clippingPlane = createPlaneFromPlanarGeometry(plane);
  obj.material.clippingPlanes = [clippingPlane];

  let positions = [];

  for (let i = 0; i < faceCount; i++) {
    let baseIdx = i * 3;
    let idxA = baseIdx + 0;
    a.fromBufferAttribute(pos, isIndexed ? idx.getX(idxA) : idxA);
    let idxB = baseIdx + 1;
    b.fromBufferAttribute(pos, isIndexed ? idx.getX(idxB) : idxB);
    let idxC = baseIdx + 2;
    c.fromBufferAttribute(pos, isIndexed ? idx.getX(idxC) : idxC);

    obj.localToWorld(a);
    obj.localToWorld(b);
    obj.localToWorld(c);

    lineAB = new THREE.Line3(a, b);
    lineBC = new THREE.Line3(b, c);
    lineCA = new THREE.Line3(c, a);

    setPointOfIntersection(lineAB, clippingPlane, positions);
    setPointOfIntersection(lineBC, clippingPlane, positions);
    setPointOfIntersection(lineCA, clippingPlane, positions);
  }

  lines.geometry.setAttribute(
    "position",
    new THREE.BufferAttribute(new Float32Array(positions), 3)
  );
}

function setPointOfIntersection(line, planarSrf, pos) {
  const intersect = planarSrf.intersectLine(line, new THREE.Vector3());
  if (intersect !== null) {
    let vec = intersect.clone();
    pos.push(vec.x);
    pos.push(vec.y);
    pos.push(vec.z);
  }
}

Example CodePen

Answer 2

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.