如何将相机的位置合并到此算法中以计算精灵在屏幕上的位置？答案

【问题标题】：How can I incorporate the camera's position into this algorithm to calculate a sprite's position on the screen?如何将相机的位置合并到此算法中以计算精灵在屏幕上的位置？
【发布时间】：2019-05-25 03:12:15
【问题描述】：

我正在 3D 空间中开发 2D 渲染系统，以供练习。精灵是 2D 的，但它们是在 3D 空间中渲染的。 “相机”可以在 3D 空间中移动并水平 360 度转动。我无法根据相机的位置/旋转和资产的位置找出正确的计算公式，它们应该存在于屏幕上的什么位置。

我拥有的是这样的：

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），只考虑摄像机/玩家面对的角度（angle）。所以现在相机不能移动。注意：深度图只是按顺序存储资源，因此渲染器知道渲染精灵的顺序，因此事物会根据更接近玩家/相机的顺序以正确的顺序显示。

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

【问题讨论】：

标签： javascript algorithm

【解决方案1】：

一些假设：

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

相机向左移动还是精灵向右移动都无关紧要。

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

 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)
);

【讨论】：