Geek Answers Handbook

Three JS - Find all points where the grid intersects the plane

I created a three.js scene that includes a plane intersecting a grid. What I would like to do is get an array of points for all locations where the edge of the grid intersects the plane. I am well versed in solutions and cannot find anything.

Here is an image of what I have:

enter image description here

And here I highlighted the coordinates that I'm trying to collect:

enter image description here

If anyone can point me in the right direction, that would be very helpful.

Thanks,

S

+8
javascript 3d
source share
1 answer

This is not a final decision. This is just the point from which you can start.

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

He also referred to this SO question with terrific underders from WestLangley and Lee Stemkoski about the .localToWorld() THREE.Object3D() method.

Suppose you want to find the intersection points of regular geometry (e.g. THREE.DodecahedronGeometry() ).

enter image description here

Idea:

  • THREE.Plane() has a .intersectLine ( line, optionalTarget ) method

  • The grid contains faces ( THREE.Face3() )

  • Each face has properties a, b, c , where vertex indices are stored.

  • When we know the vertex indices, we can get them from the vertices array

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

  • When we have three lines, we can check if their plane intersects.

  • If we have an intersection, we can store it in an array.

  • Repeat steps 3-7 for each face of the grid.

Some explanation with code:

We have a plane that equals THREE.PlaneGeometry() and obj that equals THREE.DodecahedronGeometry()

So, 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, the three vertices of any plane face are coplanar, so we can create mathPlane from them using the .setFromCoplanarPoints() method.

Then we will scroll the edges 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()); }; }

At the end we will see our points:

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

jsfiddle Click the button there to get the intersection points between the plane and the dodecahedron.

+16
source share

More articles:


All Articles