javascript - Three.jsカメラを自動回転させてオブジェクトに焦点を合わせます

Question

three.js 3D 空間には、位置がわかっている MESH オブジェクトとカメラ オブジェクトがいくつかあります。

私が達成したいのは、ボタンをクリックすると、カメラが自動回転してズーム (位置を変更) し、ユーザーのビューが選択したオブジェクトに焦点を合わせるようにすることです。選択したオブジェクトの位置はわかっています。

それを行う方法についての提案を教えてください。

Answer 1

試すcamera.lookAt( object.position );

クォータニオンを使用する必要はありません。

その後、必要に応じてカメラを近づけることができます。

Answer 2

クォータニオン slerp は、ターゲット位置へのスムーズな回転の友です。クォータニオンを使用する必要があります (camera.useQuaternion = true)。

var newQuaternion = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, destinationQuaternion, newQuaternion, 0.07);
camera.quaternion = newQuaternion;

これにより、目的の回転までスムーズに回転するはずです。最後のパラメーターをいじる必要があるかもしれません。ズームはわかりません。

Answer 3

ここにアクセスしたいかもしれません... https://threejsfundamentals.org/threejs/lessons/threejs-cameras.html 私は次のことを行い、ユーザー定義の座標に焦点を当てるために働きました...

camera.lookAt(0, 10, 0);
-----
-----
-----
controls.target.set(0, 10, 0);
controls.update();