问题描述
我正在尝试绘制3D中两个平面的相交所形成的线,但是我在理解数学上有困难,对此已经进行了解释此处和此处.
I am trying to draw the line formed by the intersections of two planes in 3D, but I am having trouble understanding the math, which has been explained here and here.
我试图自己弄清楚它,但是最接近解决方案的是一个矢量,它使用平面法线的叉积指向与相交线相同的方向.我不知道如何在相交线上找到一个点,任何点都可以.我认为这种方法是死胡同.这是此尝试的屏幕截图:
I tried to figure it out myself, but the closest that I got to a solution was a vector pointing along the same direction as the intersection line, by using the cross product of the normals of the planes. I have no idea how to find a point on the intersection line, any point would do. I think that this method is a dead end. Here is a screenshot of this attempt:
我试图使用此中提到的解决方案问题,但它与原始解释有固定联系,并且该方程式对我不起作用(括号中有不平衡的括号,我在下面尝试对其进行纠正).
I tried to use the solution mentioned in this question, but it has a dead link to the original explanation, and the equation didn't work for me (it has unbalanced parentheses, which I tried to correct below).
var planeA = new THREE.Plane((new THREE.Vector3(0, 0, 1)).normalize(), 100);
var planeB = new THREE.Plane((new THREE.Vector3(1, 1, 1)).normalize(), -100);
var x1 = planeA.normal.x,
y1 = planeA.normal.y,
z1 = planeA.normal.z,
d1 = planeA.constant;
var x2 = planeB.normal.x,
y2 = planeB.normal.y,
z2 = planeB.normal.z,
d2 = planeB.constant;
var point1 = new THREE.Vector3();
point1.x = 0;
point1.z = (y2 / y1) * (d1 - d2) / (z2 - z1 * y2 / y1);
point1.y = (-z1 * point1.z - d1) / y1;
var point2 = new THREE.Vector3();
point2.x = 1;
point2.z = (y2 / y1) * (x1 * point2.x + d1) - (x2 * point2.x - d2) / (z2 - z1 * y2 / y1);
point2.y = (-z1 * point2.z - x1 * point2.x - d1) / y1;
console.log(point1, point2);
输出:
THREE.Vector3 {x: -1, y: NaN, z: NaN, …}
THREE.Vector3 {x: 1, y: Infinity, z: -Infinity, …}
预期输出:
- 沿着交点的x = 0的点,
- 同一行上x = 1的另一点
如果有人可以为我提供一个很好的解释,说明它是如何工作的,或者是一个平面-平面相交算法的例子,我将不胜感激.
If someone could point me to a good explanation of how this is supposed to work, or an example of a plane-plane intersection algorithm, I would be grateful.
推荐答案
让three.js轻松为您解决这个问题.
It is easy to let three.js solve this for you.
如果要用矩阵表示法表达问题
If you were to express your problem in matrix notation
m * x = v
然后x的解决方案是
x = inverse( m ) * v
我们将对m使用4x4矩阵,因为three.js在Matrix4
类中具有inverse()
方法.
We'll use a 4x4 matrix for m, because three.js has an inverse()
method for the Matrix4
class.
var x1 = 0,
y1 = 0,
z1 = 1,
d1 = 100;
var x2 = 1,
y2 = 1,
z2 = 1,
d2 = -100;
var c = 0; // the desired value for the x-coordinate
var v = new THREE.Vector4( d1, d2, c, 1 );
var m = new THREE.Matrix4( x1, y1, z1, 0,
x2, y2, z2, 0,
1, 0, 0, 0,
0, 0, 0, 1
);
var minv = new THREE.Matrix4().getInverse( m );
v.applyMatrix4( minv );
console.log( v );
根据需要,v的x分量将等于c,而y和z分量将包含您要查找的值. w分量是不可取的.
The x-component of v will be equal to c, as desired, and the y- and z-components will contain the values you are looking for. The w-component is irrelevalent.
现在,重复下一个c的值,c = 1.
Now, repeat for the next value of c, c = 1.
three.js r.58
three.js r.58
这篇关于沿着两个平面的交点找到线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!