Как повернуть трёхмерную камеру вокруг объекта

Question

Я делаю эту программу, где вы можете щелкнуть по объекту, увеличить его, а затем посмотреть на него со всех сторон, удерживая правую кнопку мыши и перетаскивая ее. Мне нужна камера, чтобы обойти объект, а не поворачивать объект, глядя на камеру. Я честно просто не знаю, как это сделать!

Для тестирования уже есть цель игры с А мы выбрали и смотрим на

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

Как указано в gaitat, управление трекболом - лучшее место для начала со многими настраиваемыми параметрами, чтобы сделать поворот камеры/революцию легкой. Одно огромное потенциальное преимущество этого метода (особенно для вашего проекта) заключается в том, чтобы избежать «карданного замка», который является источником большого разочарования при работе с поворотами. Вот ссылка, которая может помочь вам с управлением трекбола и 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 

Если вы р Учтите эту опцию, имейте в виду, что объект камеры находится в «пространстве поворота камеры» и может быть более сложным для дальнейшего манипулирования.