Javascript 帮助在HTML5画布中模拟深度

基本上，我尝试在2D画布上模拟深度进行3D投影。一般来说，距离较远的物体比距离观看者较近的物体“着色”得更多、更小。唯一缺少的是离得越远的物体总是被拉到离得越近的物体后面

有时，距离较远的物体被拉到较近的物体后面，但总有较小的物体被拉到较大的物体前面，这意味着距离较远的物体有时会出现在本应更近的物体前面

我试图通过按z位置对物体进行排序来解决这个问题。Bodys数组是一个对象数组，其中0包含一个实体位置数组，0表示x，1表示y，2表示z。我首先根据x、y和z轴上的旋转更新实体的位置，并将其存储到实体对象的np值中，然后进行排序并绘制实体。我尝试过改变数组的排序方式，改变循环的顺序，但仍然没有成功

只是想知道是否有人能给我指出正确的方向，让这个3D“引擎”正常工作。感谢您的帮助。一些快速提示：使用Q/A、W/S和E/D键完成沿三个轴的旋转，使用R/F键完成z轴的放大和缩小，使用P键可以完成围绕z轴的默认旋转。我想做的是在这里：

---

您将根据原始xyz值而不是转换后的np值进行排序。我通过切换使它看起来正确

    bodies.sort(function(a,b) {return a[0][2]-b[0][2]});
to
    bodies.sort(function(a,b) {return a.np[1]-b.np[1]});

随变见

---

我没有完全遵循您的代码，因此这可能不是一个完整的解决方案。具体地说，我认为它应该按照np[2]对转换后的z值进行排序，但np[1]给出了正确的结果。我想也许你可以换一下这些坐标。此外，看起来您正在转换和投影z值，上面的代码修复程序将根据该投影的z值进行排序。这看起来很好，但我从来没有投影z值本身，只是使用变换后的z投影xy。不管怎样，看起来不错

Trochoid。我必须从另一台计算机访问，但仍然没有注册，因此我必须将此添加为一个答案，而不是注释

如果您注意到，当您旋转任何其他轴时，x和y的旋转轴都会旋转（例如，如果按W键旋转，然后旋转另一个轴，然后再次按W键，您将注意到代码中的螺旋线以相同的方式旋转）。T

对于z轴，他的情况并非如此。无论您如何旋转x轴和y轴，z轴将始终“从右向左”旋转（例如，在默认配置中，螺旋线沿z轴旋转，或使用E/D键旋转轴，但如果您沿任何其他轴旋转螺旋线，则使用E/D键旋转不再使螺旋线旋转）

---

我不知道为什么该轴的行为会有所不同，所以我希望您能帮助使旋转正常工作。谢谢。

我知道这并没有回答原来的问题，但取决于你想了解的内容，请注意还有“视差滚动”（特别是在CSS3（）。

哇，我想这只是我的大脑放屁。我添加了np（新位置）作为身体对象的一个属性，这样它就可以有这个旋转的位置来获得更深的身体。我想我需要的是另一组眼睛。关于切换坐标，这是我在身体位置上的索引上改变的结果，看看哪一个会给出正确的深度结果。我可能会回到再次感谢！数学，数学，数学，复杂，神奇。