html - html5 Canvas 中的重叠多边形

标签 html 3d 2d overlapping polygons

我正在尝试在 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/

相关文章:

c# - 如何使用 C# 绘制 3D 管的下半部分

python - 如何挤出不规则多边形?

c++ - 在索引 0 为 0 的数组中查找非零最小值 C++

java - 使用 slider 处理程序用圆弧填充椭圆

html - 如何让行内 block 元素直接打印?

javascript - 在网格中第二行 div 的顶部添加空间

javascript - 检测到输入文件控件中未选择文件

python - 如何使用 python 更新、旋转和显示 ply 文件?

canvas - CanvasRenderingContext2D 中的透明度组

html - 两列相同高度嵌套在另外两列相同高度