在球体周围分布2d矢量点

Question

我正在使用d3.js创建一个bubble chart，然后我尝试将其部分地包裹在three.js中的一个球体周围。我希望最终的结果看起来像一个蒲公英，如图所示：

二维飞机上的气泡图看起来像这样。我试图将它包裹在一个球体的中间，以创造蒲公英效果。

我有三个半工作解决方案，但从侧面看时没有一个完全遵循球体的曲线

示例A - zCoord = new THREE.Vector2(xCoord, yCoord).length(); 这给出了线性外观锥体效果，而不是弯曲效果。我想我在某种程度上需要计算一个quadratic curves而不是一条直线，但我一直试图弄清楚它。

示例B - zCoord = (diameter / 2 ) * Math.cos(phi); 这使用periodic table of elements中的代码并沿z轴螺旋数据。

示例C - 接近我想要的东西，但它不足以包裹球体，并且所有东西似乎都聚集在一起。我想保留迷你球体周围的填充物或空间

zCoord = (diameter / 2 );
var vector = new THREE.Vector3(xCoord, yCoord, zCoord).normalize().multiplyScalar(diameter / 2);

jsfiddle link to try out the methods

Answer 1

可能不是最有效的解决方案，但我确实使用Mercator Projection非常接近。这几乎就像我是UV包装，但是使用Vector2点。

我的解决方案包括将X，Y坐标映射到纬度和经度，然后使用墨卡托投影将它们投影到球体上。

var latitude = data[i].position.x / R;
var longitude = (2 * Math.atan(Math.exp(data[i].position.y / R))) - (Math.PI / 2);

xCoord = R * Math.cos(latitude) * Math.cos(longitude);
yCoord = R * Math.cos(latitude) * Math.sin(longitude);
zCoord = R * Math.sin(latitude);

link to jsfiddle showing tweening from 2d > 3d