javascript - 如何将相机的位置合并到该算法中以计算精灵在屏幕上的位置?
问题描述
我正在研究 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
)。所以现在相机不能移动。注意:深度图只是按顺序存储资产,因此渲染器知道渲染精灵的顺序,因此事物会根据更靠近玩家/相机的正确顺序显示。
如何将相机的位置合并到这个算法中?
解决方案
一些假设:
如果相机和精灵在同一位置,精灵将在 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)
);
推荐阅读
- excel - 搜索列表中的每个项目并返回所有匹配项
- excel - 如何提取PowerPoint图表中的所有轴标签
- c# - AWS 容器中的 TCP 侦听器
- javascript - 未捕获的类型错误:无法在 JavaScript.js:2 处设置 null 的属性“onclick”
- python - 为什么 Python scipy.norm.cdf 中的矢量化正态累积函数与其标量版本不同
- rest - 使用 REST API 在 Kibana 中创建警报规则失败,出现 400“无效的操作组:默认”
- node.js - 猫鼬(打字稿):键入'string | 解析问题 | 字符串[] | ParsedQs[]' 不可分配给类型 'Condition
' - reactjs - 在 reactjs 上从 Axios 服务器渲染数组
- javascript - 如何使用 Eclipse 运行 ElectronJS 应用程序?
- ios - Xamarin WebView - iOS - 在应用程序运行之间存储 cookie