Ba.js Xoay camera quanh vật thể (có thể di chuyển)

Question

Tôi có một camera di chuyển theo một vài cách khác nhau trong cảnh. Máy ảnh sẽ xoay quanh vị trí mục tiêu. Trong trường hợp của tôi, đây là một điểm trên lưới mà người dùng đã nhắm mục tiêu. Do máy ảnh thường không yêu cầu di chuyển liên quan đến điểm này nên tôi không thể sử dụng ý tưởng xoay vòng ở đây: https://github.com/mrdoob/three.js/issues/1830. Giải pháp hiện tại của tôi sử dụng mã sau:

var rotationY = new THREE.Matrix4(); 
var rotationX = new THREE.Matrix4(); 
var translation = new THREE.Matrix4(); 
var translationInverse = new THREE.Matrix4(); 
var matrix = new THREE.Matrix4(); 
function rotateCameraAroundObject(dx, dy, target) { 
    // collect up and right vectors from camera perspective 
    camComponents.up = rotateVectorForObject(new THREE.Vector3(0,1,0), camera.matrixWorld); 
    camComponents.right = rotateVectorForObject(new THREE.Vector3(1,0,0), camera.matrixWorld); 

    matrix.identity(); 

    rotationX.makeRotationAxis(camComponents.right, -dx); 
    rotationY.makeRotationAxis(camComponents.up, -dy); 
    translation.makeTranslation(
     target.position.x - camera.position.x, 
     target.position.y - camera.position.y, 
     target.position.z - camera.position.z); 
    translationInverse.getInverse(translation); 

    matrix.multiply(translation).multiply(rotationY).multiply(rotationX).multiply(translationInverse); 
    camera.applyMatrix(matrix); 
    camera.lookAt(target.position); 
} 

Vấn đề là chúng tôi không muốn sử dụng lookAt, do định hướng lại. Chúng tôi muốn có thể loại bỏ dòng đó.

Nếu chúng tôi sử dụng mã ở trên mà không có lookAt, chúng tôi xoay quanh điểm nhưng chúng tôi không xem xét điểm. Sự hiểu biết của tôi là phương pháp của tôi nên xoay tầm nhìn của máy ảnh nhiều như bản thân camera quay, nhưng thay vào đó máy ảnh chỉ được xoay một lượng nhỏ. Bất cứ ai có thể giúp tôi hiểu những gì sai?

EDIT: Đã xóa sạch bài đăng và mã gốc để hy vọng làm rõ câu hỏi của tôi.

Suy nghĩ của tôi là tôi có thể dịch sang nguồn gốc (vị trí mục tiêu của tôi), xoay số tiền mong muốn của tôi và sau đó dịch trở lại vị trí bắt đầu. Bởi vì vòng quay, tôi mong đợi ở một vị trí mới nhìn vào nguồn gốc.

Trong thực tế, tôi đang thử nghiệm nó bây giờ mà không có ma trận dịch được sử dụng, do đó, dòng nhân ma trận là:

matrix.multiply(rotationY).multiply(rotationX); 

và nó dường như được cư xử như vậy. Cảm ơn tất cả sự giúp đỡ cho đến nay!

MỘT THÊM THÊM! Một phần của vấn đề là khi máy ảnh hoạt động kém gần cực bắc hoặc cực nam. Tôi đang tìm kiếm cảm giác 'chuyển vùng tự do'.

Answer 1

Khóa Gimbal mà bạn đang đề cập đến (định hướng lại) là do việc sử dụng các góc Euler trong cài đặt mặc định của máy ảnh. Nếu bạn đặt

camera.useQuaternion = true; 

trước khi gọi điện thoại để tìm kiếm, sau đó góc điện tử sẽ không được sử dụng. Điều này có giải quyết được vấn đề của bạn không?

Answer 2

Đặt sau trong vòng lặp làm cho bạn:

camera.position.x = target.position.x + radius * Math.cos(constant * elapsedTime);   
camera.position.z = target.position.z + radius * Math.sin(constant * elapsedTime); 
camera.lookAt(target.position); 

renderer.render(scene, camera); 

Ngoài ra, bạn có thể sử dụng THREE.OrbitControls hay THREE.TrackballControls. Xem ví dụ về ba.js.