javascript - 伪3D相机转动
问题描述
我正在尝试学习使用 HTML 2D 画布在 JavaScript 中制作 3D 游戏。我正在关注这篇关于它的帖子,并制作了一个简单的场景,您可以在其中移动。
我需要帮助的是弄清楚如何制作玩家转过头、左右看和身后的效果。
这是我所拥有的:
代码(也在 codepen 上)
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d test</title>
</head>
<body>
<canvas id="canv"></canvas>
</body>
</html>
javascript
//use arrow keys to move around
var canvas = document.getElementById("canv");
var c = canvas.getContext("2d");
canvas.width = canvas.height = 800;
var crateImg = new Image();
class Entity {
constructor(x, y, z, w, h) {
this.x = x;
this.y = y;
this.z = z;
this.w = w;
this.h = h;
this.rx = 0;
this.ry = 0;
this.rs = 0;
}
render() {
//c.fillStyle = 'red';
//c.fillRect(this.rx, this.ry, this.rs*this.w, this.rs*this.h);
c.drawImage(crateImg, this.rx, this.ry, this.rs*this.w, this.rs*this.h);
}
update() {
//project to 3d
this.rs = 400/(400+this.z);
this.rx = ((this.x*this.rs) + 400);
this.ry = (this.y*this.rs) + 400;
//move
this.x += camera.xSpeed;
this.y += camera.ySpeed;
this.z += camera.zSpeed;
}
}
var camera = {
xSpeed: 0,
ySpeed: 0,
zSpeed: 0,
}
var entities = [];
function random(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
window.onload = function() {
start();
update();
}
function start() {
crateImg.src = "https://i.imgur.com/O9ForWS_d.webp?maxwidth=760&fidelity=grand";
for(let i = 0; i < 100; i++) {
entities.push(new Entity(random(-800, 800), 0, i*10, 50, 50));
}
}
function render() {
//fill background
c.fillStyle = 'skyblue';
c.fillRect(0, 0, 800, 800);
//draw flooor
c.fillStyle = 'green';
c.fillRect(0, 400, 800, 400);
//draw entities
for(let i = 0; i < entities.length; i++) {
if(entities[i].z > -400) {
entities[i].render();
}
}
}
function update() {
//updatre entities
for(let i = 0; i < entities.length; i++) {
entities[i].update();
}
entities.sort(function(i, i2) {
return i2.z - i.z;
})
//redraw current frame
render();
requestAnimationFrame(update);
}
function keyDown(e) {
switch(e.keyCode) {
case 39:
camera.xSpeed = -5;
break;
case 37:
camera.xSpeed = 5;
break;
case 38:
camera.zSpeed = -5;
break;
case 40:
camera.zSpeed = 5;
break;
}
}
function keyUp(e) {
switch(e.keyCode) {
case 39:
case 37:
camera.xSpeed = 0;
break;
case 38:
case 40:
camera.zSpeed = 0;
break;
}
}
document.onkeydown = keyDown;
document.onkeyup = keyUp;
解决方案
首先,您不应该根据相机的移动来更新箱子的坐标。相反,让相机在 3D 空间中拥有自己的位置,当您希望玩家移动时更新该位置,然后在计算 2D 空间坐标时从箱子的位置中减去相机位置。当您以后想要添加例如相机旋转或板条箱本身移动的能力时,这将使事情变得更加容易。
现在要为相机添加旋转功能,除了位置之外,您还需要为它定义一个旋转矩阵。然后,在渲染 crate 时,使用相机旋转矩阵的倒数变换 crate 坐标(在减去相机的位置之后)。这将为您提供 crates 的视图空间坐标,该坐标应投影到 2D 空间进行渲染。
根据您拥有的参数,有很多方法可以创建旋转矩阵。一个常见的是Rodrigues 旋转公式或“轴角”公式,当您有一个旋转轴和一个围绕该轴旋转的角度时使用。另一个是欧拉角。如果您不熟悉矩阵和线性代数,我建议您学习它(网上有很多免费资源),因为它广泛用于 3D 游戏开发。
推荐阅读
- c# - 无法访问在 docker 容器中启动的 ASP.NET 应用程序
- linux - 如何更改 RHEL 服务器服务文件中的 RabbitMQ 配置路径?
- google-cloud-platform - 如何解决 SSH Google Cloud Platform 上的错误 4003?
- php - 如何在php中对数字进行四舍五入?
- r - 有没有办法在函数中拥有类似的 gtsummary 表
- php - Imagekit 不返回转换后的 url
- python - 如何使用动态生成的表单管理 Django 表单验证
- powershell - 使用其他联系人的属性更新 Powershell 中的 Outlook 联系人属性会用空字符串覆盖
- html - 如何使用 css 和 html 为输入元素正确设置文本溢出省略号?
- python - groupby 级别滚动和在 lambda 函数中进行滚动之间的区别