我正在尝试在 html5 Canvas 中渲染简单的 3d 形状(在本例中为立方体)。将 3d 点转换为 2d 平面很容易,所以我继续并开始为多边形着色。它们以错误的顺序重叠。所以我只计算每个多边形的距离(基于 4 个角的平均值)并据此对它们进行排序。
除此之外并没有真正起作用。那么,如何决定先绘制哪些多边形呢?
附言我正在尝试学习如何制作它,所以使用现有的库或其他东西不会真正起作用。
最佳答案
经过一段时间的搜索,我找到了一种方法来检查这个。它是通过“背面剔除”完成的,据我了解,您首先计算多边形的 2d 位置,然后取 3 个点,然后比较它们以确定多边形面向的方向。
我使用的支票如下:
ifVisible = function(p1, p2, p3)
{
return ((p2[0]-p1[0])*(p3[1]-p1[1])>(p3[0]-p1[0])*(p2[1]-p1[1]));
}
其中 p1、p2 和 p3 是包含点的 x 和 y 位置的数组。
这仅在您对多边形中的点有顺序时有效,(在我的例子中,当面向相机时,位置是顺时针的)
关于html - html5 Canvas 中的重叠多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6842872/