This is just the beginning, not the final solution. It provides a starting point for further exploration.
UPDATE: Here you can find an extension of this answer, explaining how to create contours from given points.
Additionally, check out this SO question for insightful responses from WestLangley and Lee Stemkoski regarding the .localToWorld() method of THREE.Object3D().
Imagine wanting to determine the intersection points of a common geometry (e.g., THREE.DodecahedronGeometry()).
https://i.sstatic.net/QbiF8.png
The concept:
THREE.Plane() features the
.intersectLine(line, optionalTarget)
methodA mesh consists of faces (THREE.Face3())
Each face includes properties a, b, c, storing vertex indices
Given vertex indices, we can retrieve corresponding vertices from the array
Knowing the coordinates of face vertices enables constructing three THREE.Line3() objects
With these lines, it's possible to verify if the plane intersects them
If there's an intersection point, it can be saved in an array
Repeat steps 3 - 7 for every face of the mesh
Clarification along with code snippets:
We have plane assigned as THREE.PlaneGeometry() and obj representing THREE.DodecahedronGeometry()
Hence, let's instantiate 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);
In this setup, any face on the plane contains three co-planar vertices, allowing us to form mathPlane using .setFromCoplanarPoints() method.
Next, iterate 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();
as well as
function setPointOfIntersection(line, plane) {
pointOfIntersection = plane.intersectLine(line);
if (pointOfIntersection) {
pointsOfIntersection.vertices.push(pointOfIntersection.clone());
};
}
To conclude, visualize the points obtained:
var pointsMaterial = new THREE.PointsMaterial({
size: .5,
color: "yellow"
});
var points = new THREE.Points(pointsOfIntersection, pointsMaterial);
scene.add(points);
Check out this jsfiddle example. Click the button to see the intersection points between the plane and the dodecahedron.