Javascript 哪个面在平行投影中更远?

Javascript 哪个面在平行投影中更远?,javascript,reactjs,math,geometry,Javascript,Reactjs,Math,Geometry,我正在使用JavaScript(React)开发一个几何程序,该程序创建指定对象的轴测法(更好的平行投影),该对象由顶点和面定义(一个面可以有不同数量的顶点) 当您不需要将面设置为不透明时,它可以完美地工作,否则在其他面之上的面应该在下面 因此,我想将我的面部列表从远到近排序: [ [[100, 0, 100], [50, 50, 50], [120, 170, 120], [10, 200, 150]], [[10, 20, 30], [10, 200, 250], [50, 50, 50]

我正在使用JavaScript(React)开发一个几何程序,该程序创建指定对象的轴测法(更好的平行投影),该对象由顶点和面定义(一个面可以有不同数量的顶点)

当您不需要将面设置为不透明时,它可以完美地工作
,否则在其他面之上的面应该在下面

因此,我想将我的面部列表从远到近排序:

[
[[100, 0, 100], [50, 50, 50], [120, 170, 120], [10, 200, 150]],
[[10, 20, 30], [10, 200, 250], [50, 50, 50], [100, 30, 30]],...
]
我将使用
faces.sort(排序功能)

我不关心相交面

(将所有对象的面放在一起)

排序功能应该是什么

你必须考虑<强>轴测法定义< <强> >。它由X、Y轴旋转定义(X轴旋转可以大于或小于旋转),Z轴旋转为π/4(90°)

下面是一个旧版本的应用程序,它让您理解我的意思:

对不起,我的英语很糟糕。
谢谢

请按相机所在位置的距离排序

function distanceBetweenTwoPoints (p1, p2) {
  return Math.hypot(p1.x - p2.x, p1.y - p2.y, p1.z - p2.z)
}

function sortFunction (p1, p2) {
  return distanceBetweenTwoPoints(camera, p1) > distanceBetweenTwoPoints(camera,p2) ? -1 : 1
}
根据您想要的顺序调整标志

我不在乎相交的面

这意味着我们可以通过在中间取点,将平原缩小为点:

const vecOp = op => (a, b) => a.map((c, i) => op(c,  b[i] || b));

const add = vecOp((a, b) => a + b);
const sub = vecOp((a, b) => a - b);
const mul = vecOp((a, b) => a * b);
const div = vecOp((a, b) => a / b);
 const sum = v => v.reduce((a, b) => a + b, 0);

const middle = (a, b) =>  div(add(a, b), 2);

 const planeToPoint = ([a, b, c, d]) => middle(
   middle(a, b),
   middle(c, d)
 );
现在按“更靠近摄影机”排序,可以在两个平面的中心之间画一条线,这将产生一个方向:

 const aToB = (a, b) => 
   sub(
    planeToPoint(b),
    planeToPoint(a)
  );
现在我们可以:

该方向可与摄像机方向进行比较,从而得出两者之间的角度:

 const angle = (a, b) => sum(mul(a, b)) / sum(a) * sum(b)
现在让我们一起来看看:

 const camVec = rotToVec(cam.yaw, cam.pitch);

 planes.sort((a, b) =>
  Math.abs(angle(aToB(a, b), camVec)) < Math.PI / 4 /*90°*/ ? 1 : -1
 );
const camVec=rotToVec(凸轮偏航、凸轮俯仰);
平面。排序((a,b)=>
数学abs(角度(aToB(a,b,camVec))

免责声明:我既不尝试上面的代码,也不使用并行投影,也不擅长数学,所以要谨慎地使用我的话,我不知道我在说什么:< /p> 对于一个近似的解决方案,使用3D到3D变换,并考虑z坐标。对于每个面,保留最近的Z并在此Z上对面进行排序


一个更精确的解决方案,考虑。

< P>你所要做的就是调用。“背面剔除。一种常见的技术是确定多边形表示中的点列表从摄影机的角度看是顺时针还是逆时针。这要求您在创建顶点列表时非常小心。有关更多详细信息,请查看维基百科文章:。实现部分描述了需要转换为JavaScript的数学运算。请注意,此技术比排序面列表更快,因为它只需要检查每个面一次,而不是将每个面与其他面进行比较。

谢谢,但如何在平行投影中找到相机位置?我该如何将一张脸近似为一个点?中位数是多少?啊,真的。我没想清楚,对不起。我想你在一些数学相关的堆栈交换网站上会有更多的答案。非常感谢,但是你是否注意到我的投影是由轴的2d旋转定义的,所以我如何获得cam.jaw和cam.pitch?@strategaD,即偏航和俯仰
 const camVec = rotToVec(cam.yaw, cam.pitch);

 planes.sort((a, b) =>
  Math.abs(angle(aToB(a, b), camVec)) < Math.PI / 4 /*90°*/ ? 1 : -1
 );