1

カメラを動かしたい単純な Three.js シーンがあります。カメラは移動するだけでなく、特定のフォーカス ポイントを中心に角度を変更できる必要があります。フォーカス ポイントは実際にはカメラの位置です。レンダリング時に、実際にはカメラを平行移動cameraBuffして球体に配置し、フォーカス ポイントを見るように指示します。

カメラを動かすまでは、すべて正常に動作し、カメラを回転させることができます。でも、動き出すと何かが壊れそう！通常の角度 (垂直、0 < x < 180) では、フリーズするだけで、フォーカス ポイントを中心にまったく回転できません。少し下に移動すると、すべてが再び機能し始めます。詳しく説明すると、cameraBuffポイントがサーフェスに対して垂直になると問題が発生します。

cameraBuffこれは、フォーカスを中心にベクトル/ポイントを回転させるために使用するコードです。

//mouse.onDown* things are recorded once the mouse is initially pressed
theta = -((event.clientX - mouse.onDownPosition.x) * 0.5) + mouse.onDownTheta;
phi = ((event.clientY - mouse.onDownPosition.y) * 0.5) + mouse.onDownPhi;

phi = Math.min(180, Math.max(0, phi));

cameraBuff.x = radius * Math.sin(theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
cameraBuff.y = radius * Math.sin(phi * Math.PI / 360 );
cameraBuff.z = radius * Math.cos(theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );

たとえば、に変更phi = Math.min(180, Math.max(0, phi));するとphi = Math.min(160, Math.max(20, phi));、うまくいきますが、カメラを表面に対して垂直にしたり、低くしたりすることさえできません。

たとえば、w を押すと、次のようになります。

if (input.w)
{
    var speed = [game.direction.x*60, game.direction.z*60];

    game.camera.position.x -= speed[0]; //camera.position and focus are basically the same point all the time.
    game.focus.x -= speed[0];

    game.camera.position.z -= speed[1];
    game.focus.z -= speed[1];
}

方向は次のように計算されます。

var c = Math.sqrt(cameraBuff.x*cameraBuff.x + cameraBuff.z*cameraBuff.z);
var rat = 1/c;

game.direction.x = cameraBuff.x*rat;
game.direction.z = cameraBuff.z*rat;

誰かが私のコードの何が問題なのか説明できますか?

4

1 に答える 1

3

3D カメラには、カメラを傾ける方法を知るためのベクトルが必要です。これは通常上方向で、正の Y ベクトルです。カメラが上方向に平行であると、何が上にあるのかわからないので推測し、カメラを傾けることができません。カメラを傾けるには、上方向を変更する必要があります。

Three.jsは使っていませんが、camera.upベクターは使えると思います。

角度を 0.1 < x < 179.9 に制限することで機能させることもできます。

于 2012-05-29T16:09:36.493 に答える