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 2,010 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
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.