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

查看:700
本文介绍了三个JS - 查找网格与平面相交的所有点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



这是我目前所拥有的图片:





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



谢谢,



S

解决方案

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



UPD:



想法:


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


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


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


  4. 当我们知道顶点的索引时,我们可以从顶点的数组中获取它们


  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 THR EE.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);

这里,飞机的任何面的三个顶点是共面的,因此我们可以使用 .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 =新THREE.Line3(A,b);
lineBC =新THREE.Line3(b,C);
lineCA =新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 的例子。按下那里的按钮,得到飞机和十二面体之间的交点。


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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆