使用键盘箭头使用three.js 进行第一人称模拟

Posted 2023-02-27

【中文标题】使用键盘箭头使用three.js 进行第一人称模拟

【英文标题】：First person simulation with three.js using keyboard arrows

【发布时间】：2012-10-27 00:14:45

【问题描述】：

我的来源，请访问http://jsfiddle.net/fYtwf/

背景

我使用 three.js 进行了一个简单的 3d 模拟，其中相机被立方体包围在 3 维中。在对视图控件进行编码和测试之前，这些立方体将帮助可视化相机正在查看的位置。我想创建一个简单的 3D 应用程序，通过 up、down、left 和 right 控制相机键。就像摇头一样

问题

在我当前的应用程序中，当面向前方并开始向上看时，我们是成功的。但是，当我们向左转 90 度并按下向上箭头时……错误的事情发生了。相机增加 x 轴，但是因为我们面向另一个方向，单独修改 x 轴是错误的......

现在我假设这是因为需要一些三角函数来计算 z 轴的正确值。但是，我的三角并不出色。

当前

为了更好地理解我的意思，请访问我的 jsfiddle：http://jsfiddle.net/fYtwf/

UP 键仅增加 X

DOWN键只减X

LEFT 键只增加 Y

RIGHT键只减Y

Q 键只增加 Z

W键只减Z

（Q 和 W 编码只是为了帮助我理解。）

根据我目前的理解，当我按下 UP 键时，X 必须递增，Z 轴必须根据当前的 Y 轴进行修改。但是我不知道算法:(

所以必须在KEYUP代码中修改X和Z（我想，如果我错了，请纠正我）

// setRotateX, getRotateX, setRotateY and getRotateY are extended
// camera functions I wrote so I could work with degrees. Solution
// IS NOT required to use them, they just helped me

switch( key )

    case KEYUP:
        if ( camera.getRotateX() < 90 ) // restrict so they cannot look overhead
            camera.setRotateX( camera.getRotateX() + VIEW_INCREMENT );
        
        break;
                
    case KEYDOWN:
        if ( camera.getRotateX() > -90 ) // restrict so they cannot look under feet
            camera.setRotateX( camera.getRotateX() - VIEW_INCREMENT );
        
        break;
                
    case KEYLEFT:
        camera.setRotateY( camera.getRotateY() + VIEW_INCREMENT );
        break;
                
    case KEYRIGHT:
        camera.setRotateY( camera.getRotateY() - VIEW_INCREMENT );
        break;

【问题讨论】：

所以奇怪的是，在 y 轴上旋转会转换 z 轴，而不是 x 轴。也许这是一个错误？

【参考方案1】：

这个问题有很多解决方案，但是由于您只希望相机上下左右旋转，因此这种情况下的答案很简单。

您只需将相机欧拉顺序设置为“YXZ”，如下所示：

camera.rotation.order = "YXZ"; // three.js r.65

如果你这样做，一切都会变得非常直观。

这是一个更新的小提琴：http://jsfiddle.net/fYtwf/3/（不过，这个演示使用的是 r.54）

一旦您将camera.rotation.z 从其默认值zero 更改为，事情就会变得非常混乱。所以不要那样做。 :-)

three.js r.65

【参考方案2】：

虽然这不会直接修复您的代码，但我想我会提到 Three.js 提供了两个现成的控制器来在 FPS 模式下导航。它们都使用鼠标进行查看并且可以移动，但应该相当简单地适应键盘外观并在需要时移除移动。它们是：

FirstPersonControls PointerLockControls

我推荐后者作为起点，因为它相当简单，而前者的代码看起来令人困惑，可能是旧功能的产物。

【讨论】：

是的。总有一天我需要重新创建FirstPersonControls... :)