d3.js - 在 D3 地理投影中组成两个旋转?

标签 d3.js 3d computational-geometry rotational-matrices d3.geo

根据我发现的所有优秀示例,使用 D3 地理正射投影构建交互式地球仪,从中获得乐趣。

你可以在 http://bl.ocks.org/patricksurry/5721459 看到我的简单模型

我希望用户像轨迹球一样操纵地球仪 ( http://www.opengl.org/wiki/Trackball )。我从 Mike 的一个示例( http://mbostock.github.io/d3/talk/20111018/azimuthal.html )开始,并稍微改进以使用 Canvas 坐标并以“轨迹球坐标”表示鼠标位置(即围绕 Canvas 水平轴和垂直轴旋转),以便固定的鼠标移动在附近提供更多旋转地球的边缘(如果您使用上面解释的双曲线扩展,则在地球之外工作),而不是迈克的一:一对应关系。

本地球仪从未旋转的位置(北极垂直)开始时,效果很好,但是本地球仪已经旋转时(操纵示例,使北极面向页面外),则轨迹球控件变得不直观因为您不能简单地将轨迹球坐标的变化表示为 d3.geo.rotate 纬度/经度坐标中的增量。 D3 的 3 轴旋转涉及应用经度旋转(绕北极旋转),然后应用纬度旋转(绕 Canvas 平面中的水平轴旋转),然后应用“偏航”旋转(绕垂直于平面的轴旋转) - 参见http://bl.ocks.org/mbostock/4282586 .

我想我需要的是一种组合两个旋转矩阵的方法(当前在投影中的一个,用一个新的来稍微旋转轨迹球),但我在 D3 中看不到一种方法来做到这一点,除了深入研究源代码( https://github.com/mbostock/d3/blob/master/src/geo/rotation.js )并尝试进行数学计算来定义旋转矩阵之外。代码看起来很优雅,但没有注释,我不确定我是否可以使用正交投影实例正确破译闭包。

关于最后一点,如果有人知道 d3.geo.projection 的旋转矩阵形式,也可能会解决我的问题。

有什么想法吗?

最佳答案

patricksurry 的答案有一个替代解决方案,即使用四元数表示,灵感来自 Jason Davies 。我也认为 D3 已经原生支持这个组合了!并希望 Jason Davies 发布他的代码......

花了一些时间来计算数学。此处上传了一个演示,也试图解释数学原理。 http://bl.ocks.org/ivyywang/7c94cb5a3accd9913263

以我有限的数学知识,我认为四元数相对于欧拉的优势之一是能够一遍又一遍地组合多个旋转,而不必担心坐标引用。因此,无论你的北极面向哪里,也无论你旋转多少次,它总是有效的。 (如果我弄错了,请有人纠正我)。

关于d3.js - 在 D3 地理投影中组成两个旋转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16964993/

相关文章:

javascript - 如何使用 javascript 获取嵌套对象中所有子项的单个属性?

javascript - 如何使用velocity js创建3D显示和隐藏动画

algorithm - 求 d 维空间中一组 n 个点的直径

algorithm - 将墙合并为统一的网格,并进行角归一化

graphics - 帧缓冲区和交换链到底是什么?

algorithm - 创建连续的样条曲线/在样条曲线之间进行平滑过渡

c# - 画一条平行线

javascript - 想要使用图表,它可以给你图表库 javascript 中的某些东西带来差异

javascript - 启动时从 'springing' 停止 D3

javascript - 如何使用 Plotly 格式化数字并将小数点向左增加?