Learn D3.js

Quaternion dragging and zooming

If you tried the previous solution, you should have noticed that, the more you zoom, the harder it is to keep track of the mouse when you pan. If you turn the globe upside down, the mouse moves in one direction and the globe in the other! That's the cost of ignoring that third angle in our rotation vector.

A good solution needs to keep the mouse at the same point on the sphere during the entire dragging process. The simplest way to achieve this requires a different representation for rotations: the quaternion. A quaternion, or versor, is a 4-dimensional vector that can be used to model rotations in 3D space. It can be represented as an expression of the form: w + xi + yj + zk, where w ,x, y, and z are real ...