Three.js So verwenden Sie quaternion zum Drehen der Kamera

Question

In Three.js möchte ich THREE.quaternion verwenden, um das Kameraobjekt zum ausgewählten Objekt rotieren zu lassen.

Ich habe das Web gesucht, aber kein Beispiel/Demo oder Dokument über die Verwendung dieser Quaternion-Klasse gefunden.

Ich versuche mein Glück mit folgendem Code:

camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.y = 10; 
    camera.position.z = 0; 
    camera.position.x = radious; 
    camera.useQuaternion = true; 

    // I did use the TrackballTrackballControls. Maybe it causes the problem so I put it here 
    controls = new THREE.TrackballControls(camera, document.getElementById(_canvasElement)); 

    // function to make the camera rotate to the object 
    function focusOn3DObject(obj){ 
     obj.useQuaternion = true; 
     obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1); 

     var newQuaternion = new THREE.Quaternion(); 
     THREE.Quaternion.slerp(camera.quaternion, obj.quaternion, newQuaternion, 0.07); 
     camera.quaternion = newQuaternion; 
    } 

Aber es funktioniert nicht. Habe ich etwas verpasst? Bitte helfen. Danke im Voraus.

Answer 1

Ich denke, diese Zeile nicht funktionieren:

obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1); 

Sie benötigen

obj.useQuaternion = true 

Nach einzustellen Objekt Szene hinzufügen, wenn Sie drehen wird es automatisch auf obj.quaternion angewendet werden.

Der zweite Punkt ist, dass Sie das Objekt auf Ihre Steuerelemente und nicht die Kamera anwenden sollten. Weil Sie das Objekt und nicht die Kamera steuern wollen?

Answer 2

Slerp ist ziemlich einfach. Es dauert 4 Parameter:

• targetRotation die eigentliche Kamera-Dreh
• destinationRotation das Objekt Rotation
• destinationRotation neue Quaternion, die die neue Kamera-Dreh
• percentOfRotation dieser Parameter Spielplatz sein, ich bin mit 0,07 Hier könnte jetzt Wert zwischen 0 (0%) und 1 (100%) sein

Dies ist meine Rotationsmethode:

var qm = new THREE.Quaternion(); 
THREE.Quaternion.slerp(camera.quaternion, destRotation, qm, 0.07); 
camera.quaternion = qm; 
camera.quaternion.normalize(); 

Hoffentlich hilft Ihnen das. Und nicht stören, ich habe auch einige Wochen an der perfekten Kamera gearbeitet.