Quaternion and rotation with three.js

If you want to rotate the camera around the x-axis, there will be an interesting issue. The demos the  problem:

The Quaternion need a proper up-vector to calculate the camera’s directions of X and Y axes by the cross product. See the draft below about how it works:

camera and up vector

My solution is add two line to the code, one after the init of camera, one after the “lookAt” function:

There are two important concepts. First, the change of the up-axis will only affect the rotation reference, so every time you call the “lookAt” function you should apply an offset value to the rotation to correct the camera’s orientation. Second, the camera’s motion is contrary to what you see, so when you add positive rotation to the z-axis, the object you see will rotate clockwise, that’s somehow a little tricky, because normally the positive direction of angle is anti-clockwise.

See the solution: