javascript - examples - three.js editor

Three.js: Obtenga la dirección en la que está mirando la cámara

Question

Estoy seguro de que esta pregunta se ha duplicado muchas veces, sin embargo, ¡no puedo encontrar ninguna respuesta para mi problema específico!

Estoy creando un juego usando html5 y THREE.js, y tengo una cámara que gira con la orden de ''YXZ''.

Esto es así, la cámara gira hacia arriba, abajo, izquierda y derecha como una cabeza. Como en la vista en primera persona.

Con este orden de euler, la propiedad z en camera.rotation no se usa (siempre es 0). x se usa para especificar el tono o la latitud en radianes, y y se usa para representar la longitud.

Tengo una serie de objetivos que se mueven alrededor del usuario de una manera esférica, con la cámara constantemente en el centro de esta esfera. Digamos que la esfera tiene un radio de 1000.

Mi objetivo es calcular el ángulo entre el punto de mira de la cámara y el objetivo.

Escribí este código que calcula el ángulo entre 2 vectores:

var A = new THREE.Vector3(1,0,0);
var B = new THREE.Vector3(0,1,0);

var theta = Math.acos( A.dot(B) / A.length() / B.length() );

// theta = PI/2;

Tengo el vector del objetivo (target [0] .position).

La cosa es que no puedo encontrar una manera de obtener el vector de donde está mirando la cámara.

He examinado los métodos de Vector3.applyProjection y applyEuler, y he jugado pero todavía no puedo obtener buenos resultados.

¿Creo que la orden de euler debe volver a cambiarse a ''XYZ'' antes de hacer cualquier proyección? Lo he intentado, y no estoy seguro de cómo hacerlo, la documentación es bastante difícil de entender.

Decir si la cámara está mirando directamente a la derecha, entonces necesito obtener un vector que esté a una distancia RADIANTE del centro en la dirección de la rotación actual.

Así que terminaré con 2 vectores, ¡en los que puedo hacer cálculos!

¡Gracias por adelantado!

Answer 1

La cámara está mirando hacia abajo, es el eje z negativo interno. Así que crea un vector apuntando hacia abajo del eje z negativo:

var vector = new THREE.Vector3( 0, 0, -1 );

Ahora, aplique la misma rotación al vector que se aplica a la cámara:

vector.applyQuaternion( camera.quaternion );

Puedes obtener el ángulo en radianes al objetivo de esta manera:

angle = vector.angleTo( target.position );

EDITAR: Ahora puede obtener la dirección en la que se ve la cámara así:

var vector = new THREE.Vector3(); // create once and reuse it!
...
camera.getWorldDirection( vector );

Nota: Al pasar el vector en el que se almacena el resultado, el método no tendrá que crear una instancia de un THREE.Vector3 nuevo cada vez que se llame al método.

Actualizado a tres.js r.79

Answer 2

No puedo comentar pero la respuesta de fluffybunny funciona perfectamente. getWorldDirection() y luego cambiar ese vector a radianes es el camino a seguir.

Answer 3

Pasé mucho tiempo tratando de averiguar la pregunta del capitán obvio.

Así es como finalmente funcionó para mí:

    vector = camera.getWorldDirection();
    theta = Math.atan2(vector.x,vector.z);

theta está en radianes. Así es como oriento el personaje de mi juego para que se enfrente de la misma manera que la cámara. La getWorldDirection () es una opción bastante nueva en la cámara.

Answer 4

fluffybunny lo clavó. Con un pequeño cambio en su increíble idea, puedes obtener la rotación en grados:

var vector = camera.getWorldDirection();
angle = THREE.Math.radToDeg( Math.atan2(vector.x,vector.z) );