如何旋轉對象上的THREE.PerspectiveCamera

Question

我正在製作這個程序，您可以點擊一個對象，放大它，然後通過按住鼠標右鍵並拖動來從各個角度查看它。我需要相機繞着物體轉動，而不是用相機看着它旋轉物體。我真的不知道如何去算出它！

爲了測試已經有與XYZ一個遊戲對象，我們選擇了和正在尋找

var g = new GameObject(500, 0, 0);//The game object with xyz 
this.selected = g;//set selected to g 

//Create and set the camera 
this.camera = new THREE.PerspectiveCamera(45, w/h, 1, 10000); 
this.camera.position.x = 0; 
this.camera.position.y = 0; 
this.camera.position.z = 0; 

//set camera to look at the object which is 500 away in the x direction 
this.camera.lookAt(new THREE.Vector3(this.selected.x, this.selected.y, this.selected.z)); 

所以相機和物體之間的半徑是500，而選擇和旋轉，該相機應該始終離開500。

我在這裏更新的情景：

Main.prototype.update = function(){ 

    this.renderer.render(this.scene, this.camera);//scene is just some ambient lighting 

    //what to do when mouse right is held down 
    if(this.rightMouseDown){ 

     //placeholder functionality, needs to rotate around object based on mouse movements 
     this.camera.position.x -= 5; 

    } 
} 

如何旋轉此相機周圍克，具有500半徑？！？！

Answer 1

正如前面提到的，軌跡球控制是以許多可配置參數開始以使相機旋轉/旋轉變得容易的最佳位置。這種方法的巨大潛在收益（特別是對於您的項目）避免了「旋轉鎖定」，這是旋轉工作時令人沮喪的根源。這裏有一個鏈接可以幫助你用軌跡球控制和Orbitcontrols：

Rotate camera in Three.js with mouse

另一種辦法是設置攝像機座標自己在動畫循環實際上是很簡單的：

var angle = 0; 
var radius = 500; 

function animate() { 
... 
// Use Math.cos and Math.sin to set camera X and Z values based on angle. 
camera.position.x = radius * Math.cos(angle); 
camera.position.z = radius * Math.sin(angle); 
angle += 0.01; 
... 
} 

另一種選擇將攝像機連接到樞軸對象並旋轉樞軸：

var camera_pivot = new THREE.Object3D() 
var Y_AXIS = new THREE.Vector3(0, 1, 0); 

scene.add(camera_pivot); 
camera_pivot.add(camera); 
camera.position.set(500, 0, 0); 
camera.lookAt(camera_pivot.position); 
... 
camera_pivot.rotateOnAxis(Y_AXIS, 0.01); // radians 

如果您p使用此選項時，請注意相機對象處於「相機旋轉空間」中，並且可能會更難以進一步操作。