Skip to main content
100%

Versor Dragging - d3 & three.js running in sync

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Jan 19, 2017
Created on Jan 19, 2017

This example demonstrates a synchronized 3D globe using d3 and Three.js, controlled by a single drag gesture on a 2D orthographic projection. It shows how versor (quaternion) math maps mouse movement to a sphere’s rotation, updating both the d3 geographic paths and the Three.js mesh sphere in real time. The code uses `d3.geoOrthographic`, `d3.geoPath`, and the custom `versor.js` library for quaternion calculations. It renders land polygons from world-atlas data on a Canvas while Three.js draws a shaded sphere on a separate layer.

AI-generated description

Synchronization of d3 and tree.js globes with quaternion/versor drag.

An answer to https://github.com/d3/d3-geo/issues/74

Forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/7ea1dde508cec6d2d95306f92642bc42'>Versor Dragging</a>

gpl-3.0 Licensed

Similar vizzes