Three.js Jak używać kwaternionu do obracania kamery

Question

W Three.js, chciałbym użyć THREE.quaternion, aby obrócić obiekt kamery do wybranego obiektu.

Poszukałem w Internecie, ale nie znalazłem przykład/demo lub dokument o tym, jak używać tej quaternion klasy.

spróbuję szczęścia z następującego kodu:

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

Ale to nie działa. Przegapiłem coś? Proszę o pomoc. Z góry dziękuję.

Answer 1

myślę linia ta nie będzie działać:

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

Musisz ustawić

obj.useQuaternion = true 

Po dodaniu obiektu do sceny, podczas obracania zostanie on automatycznie zastosowany do obj.quaternion.

Po drugie, należy zastosować obiekt do elementów sterujących, a nie do aparatu. Ponieważ chcesz kontrolować obiekt, a nie kamerę?

Answer 2

Slerp jest dość łatwy. To trwa 4 parametry:

• targetRotation rzeczywisty obrót kamera obrotowa
• destinationRotation przedmiotem
• destinationRotation nowy quaternion który będzie nowa obrotowa kamera
• percentOfRotation ten parametr jest plac zabaw dla dzieci, używam 0.07 tutaj teraz może być wartość z zakresu od 0 (0%) do 1 (100%)

To jest moja metoda rotacji:

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

Mam nadzieję, że to ci pomoże. I nie przejmuj się, pracowałem kilka tygodni nad idealną kamerą.