在球体周围分布二维矢量点

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