javascript / threejs - 圍繞中心y軸（在3D空間中）圍繞圓圈移動對象的等式

Question

我正在嘗試使用threeJS，並且我已經安裝了一個攝像頭並查看場景的原點（0,0,0）。 我希望以一定的距離（半徑）繞y軸移動相機，同時保持其對原點的聚焦，但我不確定如何設置方程式。 目前，我只是旋轉物體本身，但我想轉動相機。 這是移動網格的代碼：

function checkRotation(){
    if (keyboard.pressed("left")){
        mesh.rotation.y += .05;
    }

    if (keyboard.pressed("right")){
        mesh.rotation.y -= .05;
    }
}

這里有一些移動相機的例子：

camera.position.x = ??? （某些方程式移動其x位置）camera.position.z = ??? （移動其z位置的一些方程式）camera.lookAt（mesh.position）;

你能提供的任何幫助都會很棒。 謝謝！

Answer 1

您可以沿以下行手動設置攝像機的位置：

// let theta be the amount you want to rotate by
var x = camera.position.x;
var z = camera.position.z;

camera.position.x = x * Math.cos(theta) + z * Math.sin(theta);
camera.position.z = z * Math.cos(theta) - x * Math.sin(theta);
camera.lookAt(mesh.position); // or camera.lookAt(0, 0, 0);

有關圍繞x，y和z軸旋轉的矩陣等效，請參見http://en.wikipedia.org/wiki/Rotation_matrix#In_three_dimensions 。

您也可以調整TrackballControls以使用鍵盤而不是鼠標。

默認軌跡球行為： http ： //mrdoob.github.com/three.js/examples/misc_camera_trackball.html

注意：我還沒有測試過這個 - 我正在工作。

Answer 2

有點遲到的答案，但其他人可能希望看一下Three.js附帶的OrbitControls（在examples / js / controls中）。 您可以將其設置為autoRotate。 它會照顧你的數學。

var controls = new THREE.OrbitControls(camera);
controls.autoRotate = true;
controls.autoRotateSpeed = [whatever speed you want]

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

然后在你的requestAnimationFrame中調用更新函數...

controls.update();

如果您不希望用戶能夠自己控制攝像頭位置，我相信您可以找到一種方法來禁用它，或者只是提取您需要的代碼......