三 JS - 查找网格与平面相交的所有点 [英] Three JS - Find all points where a mesh intersects a plane

问题描述

我创建了一个 Three.js 场景，其中包含一个与网格相交的平面.我想要做的是获取网格边缘与平面交叉的所有位置的点数组.我已经很好地寻找解决方案，但似乎找不到任何东西.

这是我目前拥有的图片:

这里我突出显示了我试图收集的坐标:

如果有人能指出我正确的方向，那将不胜感激.

谢谢，

S

解决方案

这不是最终的解决方案.这只是您可以开始的一个点.

UPD:

想法:

1. THREE.Plane() 有 .intersectLine ( line, optionalTarget ) 方法

2. 网格包含面 (THREE.Face3())

3. 每个面都有 a, b, c 属性，其中存储了顶点的索引.

4. 当我们知道顶点的索引时，我们可以从vertices

的数组中得到它们

5. 当我们知道一个面的顶点坐标时，我们可以构建三个THREE.Line3()对象

6. 当我们有三条线时，我们可以检查我们的平面是否与它们相交.

7. 如果我们有一个交点，我们可以将它存储在一个数组中.

8. 对网格的每个面重复步骤 3 - 7

一些代码解释:

我们有 plane 是 THREE.PlaneGeometry() 和 obj 是 THREE.DodecahedronGeometry()

所以，让我们创建一个 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);

这里，plane 的任意面的三个顶点是共面的，因此我们可以使用 .setFromCoplanarPoints() 从中创建 mathPlane代码>方法.

然后我们将遍历 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);});

哪里

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

和

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

最后，我们将使我们的观点可见:

var pointsMaterial = new THREE.PointsMaterial({尺寸:.5，颜色:黄色"});var points = new THREE.Points(pointsOfIntersection, pointsMaterial);场景添加(点)；

jsfiddle 示例.按下那里的按钮，得到平面和十二面体的交点.

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

解决方案

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.

这篇关于三 JS - 查找网格与平面相交的所有点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！