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

Question

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

这是我目前拥有的图片:

在这里,我突出了我想要收集的坐标:

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

谢谢,

小号

Answer 1

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

UPD:这是这个答案的扩展,如何从给定的点形成轮廓.

此外,它引用了这个SO问题,来自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的例子.按下那里的按钮以获得飞机和十二面体之间的交叉点.