javascript - 如何在 JavaScript 中构建交互式 3D 图表

Question

我正在构建一个交互式体育图形网站，最近我发现了 this great 3D baseball vis tool我很好奇如何制作这样的东西。特别是，我想为篮球构建一个类似的工具(显示投篮轨迹)。

我认为 stackoverflow 不是发布此内容的最佳位置，但我不确定还能在哪里询问。请随意为我指出正确的方向，或者如果这篇文章没问题，我很高兴听到人们对如何构建这样的工具的想法。

提前致谢!!

编辑:对于那些对这些类型的图表感到好奇/感兴趣的人，这里是同一网站上的另一个工具 that shows homeruns hit

Answer 1

如果您有很多 Sprite /多边形，请使用webgl-canvas。如果您不想直接使用它，有许多库可以让您的生活更轻松，例如 pixie.js(2D) 或 Three.js。

如果您没有太多多边形(<~2000)，您仍然可以使用svg。如果您采用这种方式，最好的选择是使用点云(带有圆形的散点图)或多边形，其中您将点附加到元素上，这样您就可以可以根据需要旋转它们并设置点属性(如果您使用 d3，它已经将其添加到 __data__ 属性中的元素):

polygon.__points = [[x1,y1]..];

您可以使用 3*3 矩阵 获取欧几里德 Angular ，也可以使用四元数(速度更快，并且可以避免万向节锁定)。最有可能的是，您的瓶颈不是这些，而是​​ DOM 操作。这是我的一个项目的示例，它有点旧(大约 6-7 年)，但仍然可以演示这个想法(链接打开时单击左下角图标):

http://www.i-pv.org/1_45/NFKB1

what it looks like

简而言之，如果您想要 fps 和着色，那么就选择 webgl。