在三个js中限制相机移动到某个位置的最佳方法是什么？

Question

我正在制作一款包含重力的游戏，我需要让它在你撞到墙壁或其他东西时无法移动。我在想一些类似于停止向前运动的方法，但然后你可以转身并向后运动。到目前为止还没有这样的运气。

这是我的运动代码：

document.onkeydown = function(e) {
    // e.preventDefault()
    if(e.keyCode == 87) {
        player.movement.w = true
    }
    if(e.keyCode == 65) {
        player.movement.a = true
    }
    if(e.keyCode == 83) {
        player.movement.s = true
    }
    if(e.keyCode == 68) {
        player.movement.d = true
    }
    if(e.keyCode == 69) {
        player.movement.e = true
    }
    if(e.keyCode == 81) {
        player.movement.q = true
    }
}
document.onkeyup = function(e) {
    if(e.keyCode == 87) {
        player.movement.w = false
    }
    if(e.keyCode == 65) {
        player.movement.a = false
    }
    if(e.keyCode == 83) {
        player.movement.s = false
    }
    if(e.keyCode == 68) {
        player.movement.d = false
    }
    if(e.keyCode == 69) {
        player.movement.e = false
    }
    if(e.keyCode == 81) {
        player.movement.q = false
    }
}

function loop() {
requestAnimationFrame(loop)

if(player.look.locked == true) {
        if(player.movement.w == true) {
            playerObj.translateZ(player.movement.speed / 100)
        }
        if(player.movement.a == true) {
            playerObj.translateX(player.movement.speed / 100)
        }
        if(player.movement.s == true) {
            playerObj.translateZ(player.movement.speed / 100 * -1)
        }
        if(player.movement.d == true) {
            playerObj.translateX(player.movement.speed / 100 * -1)
        }
        if(player.movement.e == true) {
            playerObj.translateY(player.movement.speed / 100 * -1)
        }
        if(player.movement.q == true) {
            playerObj.translateY(player.movement.speed / 50)
        }
    }
}
loop()

（我知道 event.keyCode 已贬值）

Answer 1

我最初用它来用 THREE.js 制作 3D 游戏，但由于我没有物理经验，我认为这将是一个简单的解决方法。事实并非如此。

我建议使用 CANNON.js，而不是使用

camera.position.x += speed

或

camera.translateX(speed)

移动相机，将相机设置为 CANNON.js 中的一个框，并使用循环将相机位置设置为框的位置。然后使用

box.velocity.x = speed

四处移动。它具有碰撞检测功能，您可以使用其他 CANNON.js 形状来制作场景。

另外，当我开始使用它时，由于某种原因我遇到了这个问题，所以我想我应该提到它：CANNON.js 场景和 THREE.js 场景是完全独立的世界，然后你将两者结合起来。