HTML 2D Canvas下JavaScript伪3D游戏摄像头转向功能实现求助

要实现左右转头的视角旋转效果，你需要给相机增加水平旋转属性，再通过旋转矩阵对场景中所有实体的坐标做变换后再投影，具体改动如下：

1. 扩展相机属性 #

给camera对象新增旋转角度和旋转速度的参数，角度用弧度计量：

var camera = {
    xSpeed: 0,
    ySpeed: 0,
    zSpeed: 0,
    rot: 0, // 水平旋转角度，默认朝前
    rotSpeed: 0 // 旋转速度
}

2. 修改实体的更新逻辑 #

在计算投影前，先对实体的x、z坐标应用旋转变换，模拟相机转动的效果：

update() {
    // 应用相机旋转变换
    const cos = Math.cos(camera.rot);
    const sin = Math.sin(camera.rot);
    const transformedX = cos * this.x + sin * this.z;
    const transformedZ = -sin * this.x + cos * this.z;
    this.transformedZ = transformedZ; // 存下来用于深度排序

    // 投影计算改用变换后的坐标
    this.rs = 400/(400 + transformedZ);
    this.rx = ((transformedX * this.rs) + 400);
    this.ry = (this.y * this.rs) + 400;

    // 移动逻辑不变
    this.x += camera.xSpeed;
    this.y += camera.ySpeed;
    this.z += camera.zSpeed;
}

3. 修改实体深度排序规则 #

改用变换后的z坐标做排序，保证遮挡关系正确：

entities.sort(function(i, i2) {
    return i2.transformedZ - i.transformedZ;
})

4. 修改可见性判断逻辑 #

渲染前的可见性判断也要用变换后的z坐标，避免转身后的物体被错误过滤：

//draw entities
for(let i = 0; i < entities.length; i++) {
    if(entities[i].transformedZ > -400) {
        entities[i].render();
    }
}

5. 新增旋转的按键控制 #

这里我们用A、D键控制左右转头，修改keyDown和keyUp函数：

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;
        case 65: // A键 向左转头
            camera.rotSpeed = 0.05;
            break;
        case 68: // D键 向右转头
            camera.rotSpeed = -0.05;
            break;
    }
}

function keyUp(e) {
    switch(e.keyCode) {
        case 39:
        case 37:
            camera.xSpeed = 0;
            break;
        case 38:
        case 40:
            camera.zSpeed = 0;
            break;
        case 65:
        case 68:
            camera.rotSpeed = 0;
            break;
    }
}

6. 每帧更新相机旋转角度 #

在update函数开头加上相机角度的更新：

function update() {
    // 更新相机旋转角度
    camera.rot += camera.rotSpeed;
    // 原有逻辑不变
    for(let i = 0; i < entities.length; i++) {
        entities[i].update();
    }
    entities.sort(function(i, i2) {
        return i2.transformedZ - i.transformedZ;
    })
    render();
    requestAnimationFrame(update);
}

改完之后按A和D就可以左右转头查看身后的场景了，原有方向键的平移功能也可以正常使用。

内容的提问来源于stack exchange，提问作者ChandraGupta