9

私の情報源については、http://jsfiddle.net/fYtwf/にアクセスしてください。

バックグラウンド

カメラが立方体で3次元で囲まれているthree.jsを使用した簡単な3Dシミュレーションがあります。これらの立方体は、ビュー コントロールがコード化されてテストされるまで、カメラが見ている場所を視覚化するのに役立ちます。カメラがup、down、left、rightキーで制御されるシンプルな 3D アプリケーションを作成したいと考えています。頭を動かすのと同じように

問題

私の現在のアプリケーションでは、前を向いて上を見始めると成功です。しかし、左に 90 度回転し、上矢印を押すと... 間違ったことが起こります。カメラは x 軸をインクリメントしますが、別の方向を向いているため、x 軸だけを変更するのは間違っています...

これは、z 軸の正しい値を計算するために三角法が必要なためだと思います。しかし、私のトリックは素晴らしいものではありません。

現時点の

私の言いたいことをよりよく理解するには、私の jsfiddle にアクセスしてください: http://jsfiddle.net/fYtwf/

UPキーは X だけをインクリメントします

DOWNキーのみ X を減少させます

左キーのみ Y をインクリメント

右キーのみ 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すると、非常に混乱します。だから、それをしないでください。:-)

three.js r.65

于 2012-11-07T03:12:09.650 に答える
3

これでコードが直接修正されるわけではありませんが、Three.js には FPS モードでナビゲートするための 2 つの既製のコントローラーが用意されていることに言及したいと思います。どちらもマウスを使用して移動できますが、キーボードの外観に適応し、必要に応じて移動を削除するのはかなり簡単でなければなりません。彼らです：

後者を出発点としてお勧めします。これはかなり単純であり、前者にはおそらく古い機能のアーティファクトとして、見た目が紛らわしいコードが2回あるためです。

于 2012-11-07T07:14:05.617 に答える