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

Question

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

这是我目前拥有的图像:

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

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

谢谢，

小号

Answer 1

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

更新:Here是这个答案的扩展，如何从给定的点形成轮廓。

另外，它被称为 this SO question来自 WestLangley 和 Lee Stemkoski 关于 .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 的任意面的三个顶点是共面的，因此我们可以创建mathPlane从他们那里，使用.setFromCoplanarPoints()方法。

然后我们将遍历 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例子。按下那里的按钮以获得平面和十二面体之间的交点。