Moviendo la cámara, lookAt y rotaciones en three.js

Question

Tengo problemas para comprender el aspecto y las rotaciones de la cámara.

Tengo un círculo de esferas pequeñas alrededor de [0,0,0] en el plano xy.

La cámara se coloca en [0,0,30] y después de un vistazo, la rotación de la cámara es [0,0,0]. El círculo aparece como si mirara desde arriba (como se esperaba).

Luego muevo la cámara a [30,0,0] y después de un vistazo, la rotación de la cámara es [0,90deg, 0]. El círculo aparece en su lado, pero verticalmente, no horizontalmente como yo esperaría. ¿Por qué la cámara gira 90 grados para y?

Después de eso muevo la cámara a [0,30,0] y después de un vistazo, la rotación de la cámara es [-90deg, 0,90deg]. El círculo aparece de nuevo en su lado, verticalmente, no horizontalmente.

¿Por qué está girando la cámara? Pensé que no habría rotación en absoluto ya que estaba en los ejes x e y.

¡Gracias por cualquier ayuda! :-)

Nota: Originalmente publicado en https://github.com/mrdoob/three.js/issues/2917 pero se le dijo que viniera a Stack Overflow.

Answer 1

Para solucionar el problema, puede especificar el vector ascendente para la cámara antes de ejecutar el comando lookAt ().

// Place camera on x axis
camera.position.set(30,0,0);
camera.up = new THREE.Vector3(0,0,1);
camera.lookAt(new THREE.Vector3(0,0,0));

Cambia el vector a tus necesidades. Incluso puedes darle la vuelta al especificar un valor negativo: (0,0, -1). Es importante configurar el vector ascendente ANTES de usar lookAt ().

He creado un ejemplo completo en http://jsfiddle.net/VsWb9/991/ con 2 cubos. Se supone que el más pequeño está sobre el grande (en el eje z positivo).