La fotocamera Three.js si inclina verso l’alto o verso il basso e mantiene il livello dell’orizzonte

camera.rotate.y padella a sinistra oa destra in modo prevedibile.

camera.rotate.x guarda in alto o in basso in modo prevedibile quando camera.rotate.y è a 180 gradi.

ma quando cambio il valore di camera.rotate.y in qualche nuovo valore, e poi cambio il valore di camera.rotate.x, l’orizzonte ruota.

Ho cercato un algoritmo per regolare la rotazione dell’orizzonte dopo che camera.rotate.x è stata modificata, ma non l’ho trovata.

In three.js, l’orientamento di un object può essere specificato dal suo vettore di rotazione di Eulero object.rotation . Le tre componenti del vettore di rotazione rappresentano la rotazione in radianti rispettivamente attorno all’asse x interno dell’object, all’asse ye all’asse z.

L’ordine in cui vengono eseguite le rotazioni è specificato da object.rotation.order . L’ordine predefinito è “XYZ”: la rotazione intorno all’asse x avviene prima, quindi l’asse y, quindi l’asse z.

Le rotazioni vengono eseguite rispetto al sistema di coordinate interno dell’object, non al sistema di coordinate del mondo. Questo è importante. Quindi, ad esempio, dopo la rotazione x, gli assi y e z dell’object in genere non saranno più allineati con gli assi del mondo. Le rotazioni specificate in questo modo non sono uniche.

Quindi, ad esempio, se nel codice specificato,

 camera.rotation.y = y_radians; // Y first camera.rotation.x = x_radians; // X second camera.rotation.z = 0; 

le rotazioni vengono applicate nella rotation.order dell’object. Ordine, non nell’ordine in cui le hai specificate.

Nel tuo caso, potresti trovare più intuitivo impostare rotation.order su “YXZ”, che equivale a “heading, pitch e roll”.

Per ulteriori informazioni sugli angoli di Eulero, consultare l’ articolo di Wikipedia . Three.js segue la convenzione di Tait-Bryan, come spiegato nell’articolo.

three.js r.61