javascript - 我怎样才能将相机的位置合并到这个算法中来计算 Sprite 在屏幕上的位置？

Question

我正在研究 3D 空间中的 2D 渲染系统，以供练习。 Sprite 是 2D 的，但它们是在 3D 空间中渲染的。 “相机”可以在3D空间移动，水平360度旋转。根据摄像机的位置/旋转和 Assets 的位置，我无法找出正确的计算公式，它们应该存在于屏幕上的位置。

我的是这样的:

chunk.assets.forEach(asset => {
    let x = Math.round(
      asset.coords.x * Math.cos(angle) - asset.coords.y * Math.sin(angle)
    );
    let y = Math.round(
      asset.coords.y * Math.cos(angle) + asset.coords.x * Math.sin(angle)
    );
    if (!depthMap[y]) {
      depthMap[y] = [];
    }
    depthMap[y].push(asset);
});

但这并没有考虑相机(玩家)的位置(存储在player.coords.x, player.coords.y)，只有相机/玩家面对的 Angular ( Angular )。所以现在相机不能移动。注意:深度图只是按顺序存储 Assets ，以便渲染器知道渲染 Sprite 的顺序，以便事物以正确的顺序显示，这取决于哪个更接近播放器/相机。

如何将相机的位置纳入该算法？

Answer 1

一些假设:

如果相机和 Sprite 在同一位置， Sprite 将在 0|0 处渲染。

无论相机向左移动还是 Sprite 向右移动都没有关系。

由此我们可以得出结论，只有相对位置很重要，而且可以很容易地计算出来(通过减去两个位置)。

 let x = Math.round(
  (asset.coords.x - player.coords.x) * Math.cos(angle) - (asset.coords.y - player coords.y) * Math.sin(angle)
);
let y = Math.round(
  (asset.coords.y - player.coords.y) * Math.cos(angle) + (asset.coords.x - player.coords.x) * Math.sin(angle)
);