Three.js Kamera um ein Objekt drehen (das sich bewegen kann)

Question

Ich habe eine Kamera, die sich in der Szene auf verschiedene Arten bewegt. Die Kamera sollte sich um eine Zielposition drehen. In meinem Fall ist dies ein Punkt in einem Netz, auf das der Nutzer abgezielt hat. Da die Kamera normalerweise nicht relativ zu diesem Punkt bewegt werden muss, konnte ich die Pivot-Idee hier nicht verwenden: https://github.com/mrdoob/three.js/issues/1830. Meine aktuelle Lösung verwendet den folgenden Code ein:

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); 
} 

Das Problem ist, dass wir nicht wollen, LookAt verwenden, da der Neuausrichtung. Wir möchten diese Zeile entfernen können.

Wenn wir den obigen Code ohne LookAt verwenden, drehen wir um den Punkt, aber wir betrachten den Punkt nicht. Mein Verständnis ist, dass meine Methode die Ansicht der Kamera so sehr drehen sollte, wie die Kamera selbst gedreht wird, aber stattdessen wird die Kamera nur eine kleine Menge gedreht. Kann mir jemand helfen zu verstehen, was los ist?

EDIT: Bereinigt den ursprünglichen Post und Code, um meine Frage hoffentlich zu klären.

Mein Denken ist, dass ich auf den Ursprung übersetzen kann (meine Zielposition), meinen gewünschten Betrag drehen, und dann in die Anfangsposition zurück zu übersetzen. Aufgrund der Rotation erwarte ich, dass ich in einer neuen Position bin und auf den Ursprung schaue.

In der Tat, Ich teste es jetzt ohne die Übersetzung Matrizen verwendet werden, so dass die Matrixmultiplikation Linie ist:

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

und es scheint das gleiche verhalten werden. Danke für die Hilfe bis jetzt!

ONE MORE THING! Ein Teil des Problems besteht darin, dass sich die Kamera in der Nähe des Nord- oder Südpols schlecht verhält. Ich bin auf der Suche nach einem "Frei-Roaming".

Answer 1

Die Gimbal-Sperre, auf die Sie sich beziehen (Neuausrichtung), ist wegen der Verwendung von Euler-Winkeln in der Standardimplementierung des Kamera-Lookats. Wenn Sie

camera.useQuaternion = true; 

vor Ihrem Anruf zu sehen, werden Euler Winkel nicht verwendet werden. Würde das dein Problem lösen?

Answer 2

Folgendes in die Render-Schleife Put:

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); 

Alternativ Sie THREE.OrbitControls oder THREE.TrackballControls verwenden können. Siehe die three.js-Beispiele.