9

对于我的来源，请访问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;
}
4

2 回答 2

5

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

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

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

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

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

一旦你改变camera.rotation.z它的默认值zero，事情就会变得非常混乱。所以不要那样做。:-)

三.js r.65

于 2012-11-07T03:12:09.650 回答
3

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

我推荐后者作为起点，因为它相当简单，而前者令人困惑地具有两次外观代码，可能是旧功能的产物。

于 2012-11-07T07:14:05.617 回答