我正在尝试学习使用HTML 2D画布在JavaScript中制作3D游戏。我在关注这篇关于它的帖子，我做了一个简单的场景，你可以在里面移动
我需要帮助的是弄清楚如何让球员转头，左右看，身后看。
这是我所拥有的：
代码笔链接
代码(也在代码笔上(
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空间坐标时从板条箱的位置中减去相机位置。当你以后想要添加相机旋转或板条箱本身移动的功能时，这会让事情变得更容易。
现在，要为相机添加旋转功能，除了位置之外，还需要为其定义旋转矩阵。然后，在渲染板条箱时，使用摄影机旋转矩阵的倒数变换板条箱坐标(减去摄影机的位置后(。这将为您提供板条箱的视图空间坐标，这些坐标应投影到2D空间上进行渲染。
根据参数的不同，有很多方法可以创建旋转矩阵。一个常见的公式是罗德里格斯旋转公式或"旋转公式"；轴角度"；公式，当您有一个旋转轴和绕该轴旋转的角度时使用。另一个是欧拉角。如果你不熟悉矩阵和线性代数，我建议你学习它(网上有很多免费资源(，因为它在3D游戏开发中被广泛使用。