ThreeJS camera.lookAt（）は効果がありません。間違っていることはありますか？

Question

Three.jsでは、私はカメラが3D空間内のあるポイントを指し示したいと思っています。この目的のために

、私はそうのようなcamera.lookAt機能を使用してみました：

camera.lookAt(new THREE.Vector3(-100,-100,0)); 

はしかし、私は、コールが全く影響を与えないことが分かりました。それは全く何もしません。私はベクトルの数値を変えようとしましたが、いつ変化するのでしょうか、常に画面上で同じように見えます。

私のコードにあるTHREE.TrackballControlsを削除すると、camera.lookAt()が正常に動作することが判明しました。 THREE.TrackballControlsの使い方に何か問題がありますか？これは私がそれらを初期化する方法である：

controls = new THREE.TrackballControls(camera, renderer.domElement); 

    controls.rotateSpeed = 10.0; 
    controls.zoomSpeed = 1.2; 
    controls.panSpeed = 0.2; 

    controls.noZoom = false; 
    controls.noPan = false; 

    controls.staticMoving = true; 
    controls.dynamicDampingFactor = 1.0; 

    var radius = 5; 
    controls.minDistance = radius * 1.1; 
    controls.maxDistance = radius * 100; 

    controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]*/ 

そして、私のレンダリング機能で私が：Three.jsで

function render() { 
    controls.update(); 
    renderer.render(scene, camera); 
} 

ドキュメントがかなり不足しているので、私は、私はここにお願いしたいと思いました。私は何か間違っているのですか？

Answer 1

はTHREE.TrackballControlsのソースコードを見ると、私は私は私はそれを見てみたいTHREE.Vector3にtrackballControls.targetを設定して、シーンを再レンダリングすることによってたいカメラの外観を作ることができることを考え出しました。

Answer 2

はいいいえ... THREE.TrackballControlsまたはTHREE.OrbitControlsを使用すると、コントロールのインスタンスをインスタンス化するときにカメラで渡されるように、camera.lookAt関数がオーバーライドされているようです。コントロールを取り除き、camera.lookAt（）を実行するか、カメラを別の方法でトゥイーンして、コントロールがカメラにオーバーライドしていることを確認することができます。私はしばらくの間、なぜ、camera.lookat（）が効果がないように見えたのですか？

Answer 3

私はそれを理解しました。初期化時にcamera.lookAtをオーバーライドからTHREE.TrackballControlsまたはTHREE.OrbitControlsを防ぐために、あなたの代わりにそれが現在new THREE.Vector3()（これはデフォルト値を使用して実装されますかで、camera.positionベクトルとcamera.getWorldDirection()ベクトルの合計に等しくなるように、コントロールのtargetプロパティを設定する行を変更する必要があります〜(0, 0, 0)）。

ので、THREE.TrackballControlsのために、に変更ライン39：

this.target = new THREE.Vector3().addVectors(/*new line for readability*/ 
    object.position, object.getWorldDirection()); 

同じことが、私はactaully TrackballControls.js上でそれをテストしていないが、それはOrbitControls.js上で動作しない線36 に、THREE.OrbitControlsのために行きます。お役に立てれば。

Answer 4

代わりの解決策は次のとおりです.0次元のオブジェクト（キューブ）を作成します。

var cameraTarget = new THREE.Mesh(new THREE.CubeGeometry(0,0,0)); 

render関数では、camera.lookAtをcameraTargetの位置に設定します。

function render() { 
    camera.lookAt(cameraTarget.position); 
    renderer.render(scene, camera); 
} 

希望するとおりにcameraTargetを移動します。

Answer 5

私の意見では、元のコードを混乱させるものではありません。特定のポイントを見るという目的を達成する方法を見つけました。単純に以下の2行のコードを実行あなたの「制御」変数を宣言した後 ：

// Assuming you know how to set the camera and myCanvas variables 
control = new THREE.OrbitControls(camera, myCanvas); 

// Later in your code 
control.object.position.set(camX, camY, camZ); 
control.target = new THREE.Vector3(targetX, targetY, targetZ); 

が、これはあなたの新しいターゲットに焦点の中心を切り替えますことを、私を覚えておいてください。つまり、新しいターゲットはカメラのすべての回転の中心になります。一部のパーツは、デフォルトのセンターを想定してカメラを操作するのに慣れてきたので、見るのが難しいでしょう。できるだけズームインしてみてください。私が何を言っているのかが分かります。 このヘルプが必要です。