canvas3d图形转2d转换公式

最新推荐文章于 2022-04-14 19:18:51 发布

原创最新推荐文章于 2022-04-14 19:18:51 发布 · 956 阅读

0 ·

CC 4.0 BY-SA版权

js'随笔专栏收录该内容

19 篇文章

订阅专栏

本文详细解析了三维坐标(x, y, z)转换到二维屏幕坐标的过程，通过一个to2d函数实现，该函数考虑了观察点的坐标、容器的宽高，并将原点调整至画布中央，确保全面的视觉效果。

思路： https://www.jianshu.com/p/e3ebe08dddad

    to2d(x,y,z) {
      return {
        x:((x - view.x) * view.z) / (view.z - z) + offsetX,
        y:((y - view.y) * view.z) / (view.z - z) + offsetY
      };
    }

//offsetX是容器宽的一半
//offsety是容器高的一半
//x,y,z是被转换（被观测）的点对应的立体几何坐标
//view是观察点的坐标对象（根据观察点的变化，2d图形跟随变化）（自定义）

至于为什么要加容器的宽高一半，是因为，坐标系以左边为原点，负坐标的点就就看不到了
加一半的宽高就把原点变成了画布的中点了