Rotate the globe with the mouse.
The naïve method uses mouse.x and mouse.y as proxies for longitude and latitude. It works when the rotation is small, but try to put the globe "upside-down" and suddenly moving the mouse to the left rotates the globe to the right, and vice versa.
The correct solution is to track the spherical coordinates of the point that is under the mouse, and apply a rotation to the globe that will move the initial point to the current mouse position. Computing that rotation involves quaternions.
This method, introduced by Jason Davies and Mike Bostock, is called versor dragging.
This module contains the quaternion & versor functions. For a directly usable package, see d3-inertia.
In Node:
const versor = require("versor");
// interpolate angles (slerp), see https://observablehq.com/@d3/world-tour
versor.interpolate(rotation0, rotation1); // function of (t)
// quaternion to rotate between p0 and p1, see d3-inertia
const p0 = [0, 0],
p1 = [90, 0],
c0 = versor.cartesian(p0),
c1 = versor.cartesian(p1);
versor.delta(c0, c1); // [0.7071, 0.7071, 0, 0]
// tweening: quaternion to rotate halfway between p0 and p1
versor.delta(c0, c1, 0.5); // [0.9239, 0.3827, 0, 0]
// utilities
// get cartesian coordinates [x, y, z] given spherical coordinates [λ, φ].
versor.cartesian = function(e) {
var l = e[0] * radians, p = e[1] * radians, cp = cos(p);
return [cp * cos(l), cp * sin(l), sin(p)];
};
// create a quaternion from Euler angles
const q0 = versor([90,0,0]); // [0.7071068, 0.7071068, 0, 0]
const q1 = versor([0,90,0]); // [0.7071068, 0, 0.7071068, 0]
// the quaternion that represents q0 * q1.
q01 = versor.multiply(q0, q1); // [0.5, 0.5, 0.5, 0.5]
// Euler rotation angles [λ, φ, γ] for the given quaternion.
versor.rotation(q01); // [90, 0, 90]
In a browser:
<!DOCTYPE html>
<script src="https://unpkg.com/versor"></script>
<script>
versor([90,0,0]);
</script>
FAQs
Versor
The npm package versor receives a total of 1,523 weekly downloads. As such, versor popularity was classified as popular.
We found that versor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.