web-dev-qa-db-ja.com

3つのJSのcamera.lookAt（）は効果がありません。何か問題がありますか？

Three.jsで、カメラを3D空間の1点に向けます。

この目的のために、_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 ]*/
_

そして、私のレンダー関数で私は行います：

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

Three.jsのドキュメントは非常に少ないため、ここで質問したいと思いました。私は何か間違ったことをしていますか？

javascriptmacosgoogle-chrome3dthree.js
28
houbysoft

THREE.TrackballControls のソースコードを見ると、trackballControls.targetをTHREE.Vector3に設定することで、カメラを好きな場所に表示できることがわかりました。見て、シーンを再レンダリングします。

46
houbysoft

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

5
Leon

私の意見では、元のコードをいじる必要はありません。特定の点を見るという目的を達成する方法を見つけました。 "control"変数を宣言したら、次の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);

これにより、フォーカスの中心が新しいターゲットに切り替わることを覚えておいてください。つまり、新しいターゲットはカメラのすべての回転の中心になります。デフォルトの中心を想定してカメラを操作するのに慣れると、一部のパーツは見づらくなります。できるだけズームインしてみてください。そうすれば、私が言っていることがわかります。

4
Khoubeib Bouthour

これが代替ソリューションです：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を必要に応じて移動します。

1
sebjwallace

私はそれを考え出した。初期化時に_THREE.TrackballControls_または_THREE.OrbitControls_が_camera.lookAt_をオーバーライドしないようにするには、コントロールのtargetプロパティを設定する行を変更して、sum_camera.position_ベクトルとcamera.getWorldDirection()ベクトルの現在のnew THREE.Vector3()（デフォルトでは_(0, 0, 0)_）。

したがって、 _THREE.TrackballControls_ の場合、39行目を次のように変更します。

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

同じことが36行目の _THREE.OrbitControls_ にも当てはまります。私は実際には_TrackballControls.js_でテストしていませんが、_OrbitControls.js_では機能します。お役に立てれば。

0
Andrea Aloi