javascript - 帮助在 HTML5 Canvas 中模拟深度

Question

基本上，我正在尝试通过深度模拟在 2D Canvas 上进行 3D 投影。作为一般规则，较远的物体比靠近观察者的物体“阴影”更多和更小。唯一缺少的是离得更远的物体总是被拉到更近的物体后面。

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

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

只是想知道是否有人可以指出正确的方向来让这个 3D“引擎”正常运行。任何帮助表示赞赏。一些快速说明:沿三个轴的旋转是使用 Q/A、W/S 和 E/D 键完成的，放大和缩小 z 轴是使用 R/F 键完成的，默认旋转z 轴可以使用 P 键完成。我正在尝试做的事情位于此处:

http://jsbin.com/aholu/5/

Answer 1

您正在对原始 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]});

有变化见http://home.comcast.net/~trochoid/mod5.html

我没有遵循您的所有代码，因此这可能不是一个完整的解决方案。具体来说，我认为它会根据 np[2] 对转换后的 z 值进行排序，但 np[1] 给出了正确的结果。我想也许你会改变这些坐标。此外，看起来您正在转换和投影 z 值，并且上面的代码修复对此投影的 z 值进行排序。看起来没问题，但我从来没有投影过 z 值本身，只是使用转换后的 z 来投影 xy。无论如何，看起来不错!