Three.js Come utilizzare quaternion per ruotare la telecamera

In Three.js, vorrei utilizzare TREQuery per rendere l'oggetto della fotocamera ruotare sull'oggetto selezionato.Three.js Come utilizzare quaternion per ruotare la telecamera

Ho fatto ricerche sul Web ma non ho trovato alcun esempio/demo o documento su come utilizzare questa classe di quaternioni.

cerco la mia fortuna con codice seguente:

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

Ma non funziona. Ho dimenticato qualcosa? Per favore aiuto. Grazie in anticipo.

fonte

2012-07-26 user1533481

Si noti che nelle versioni più recenti di THREE.js, 'useQuaternion' è stato rimosso. La libreria ora usa i quaternioni per impostazione predefinita. –

Si noti inoltre che oggi (agosto/2015) gli oggetti Camera di THREE hanno un metodo .lookAt (vector3) - riceve un Vector3 con la posizione di un oggetto da guardare. È possibile passare qualsiasi object3d.position come parametro, affinché la fotocamera possa guardarlo. Dai un'occhiata a: http://threejs.org/docs/index.html#Reference/Cameras/Camera – Tiago

penso che questa linea non funzionerà:

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

È necessario impostare

obj.useQuaternion = true

Dopo aver aggiunto oggetto di scena, quando si ruota verrà applicato automaticamente a obj.quaternion.

Il secondo punto è applicare l'oggetto ai controlli e non alla fotocamera. Perché vuoi controllare l'oggetto e non la fotocamera?

fonte

2012-07-26 15:41:47

Vorrei ruotare la fotocamera e mettere a fuoco l'oggetto. La telecamera si muoverà attorno all'oggetto. Quindi penso che la telecamera sarà in controllo. Mi sbagliavo? – user1533481

Sembra che sto trovando nell'oscurità in quanto non vi è alcun documento o un esempio al riguardo :(. Potresti spiegarmi la funzione slerp? Per quale motivo si tratta? Ho provato il tuo suggerimento ma non ci sono riuscito. – user1533481

Nota che nelle versioni più recenti di THREE.js è stato rimosso 'useQuaternion', che ora utilizza i quaternioni per impostazione predefinita –

Lo slerp è abbastanza semplice. Ci vogliono 4 parametri:

targetRotation fotocamera vera e propria Rotazione
destinationRotation l'oggetto
destinationRotation nuovo quaternione che sarà la nuova rotazione della telecamera
percentOfRotation questo parametro è un parco giochi, sto usando 0,07 qui in questo momento, potrebbe essere valore compreso tra 0 (0%) e 1 (100%)

Questo è il mio metodo di rotazione:

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

Speriamo che questo ti possa aiutare. E non preoccuparti, ho anche lavorato per alcune settimane sulla fotocamera perfetta.

fonte

2012-08-06 13:53:27

Ciao, nella documentazione, .slerp ha solo 2 parametri ... https://threejs.org/docs/#Reference /Math/Quaternion...Did ho frainteso qualcosa? –

@ SébastienGarcia-Roméo ci sono due metodi di slerp su Quaternion - quello usato in questa risposta è quello statico. Entrambi sono elencati nella pagina [quaternion docs] (https: //threejs.org/docs/#api/math/Quaternion.slerp), ma il metodo statico è in fondo. –

Three.js Come utilizzare quaternion per ruotare la telecamera

risposta

Problemi correlati