三个JS - 查找网格与平面相交的所有点

Question

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

这是我目前拥有的图片：

在这里，我突出了我想要收集的坐标：

如果有人能指出我正确的方向，那将是最受欢迎的。

谢谢，

小号

Answer 1

这不是最终解决方案。 这只是你可以从哪里开始的。

UPD： 这是这个答案的扩展，如何从给定的点形成轮廓 。

另外，它引用了这个SO问题 ，来自WestLangley和Lee Stemkoski关于.localToWorld()的.localToWorld()方法的THREE.Object3D() 。

让我们假设您想要找到通常几何体的交点（例如， THREE.DodecahedronGeometry() ）。

想法：

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);
  if (pointOfIntersection) {
    pointsOfIntersection.vertices.push(pointOfIntersection.clone());
  };
}

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

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

jsfiddle的例子。 按下那里的按钮以获得飞机和十二面体之间的交叉点。