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: