распределение 2d векторных точек вокруг сферы

Question

Я использую d3.js для создания bubble chart, который затем я пытаюсь частично обернуть вокруг сферы в three.js. Я хотел бы, чтобы конечный результат выглядел как одуванчик, как показано на рисунке:

Буферная диаграмма на 2-м плане выглядит так. Я пытаюсь обернуть его на полпути вокруг сферы, чтобы создать эффект одуванчика.

У меня есть три полу-рабочие решения, но ни в точности не следовать кривой шара, если смотреть со стороны

Пример A - zCoord = new THREE.Vector2(xCoord, yCoord).length(); Это дает эффект конуса линейный смотрит, а не искривленной эффект. Я думаю, мне почему-то нужно вычислить quadratic curves вместо линейной линии, но я застреваю, пытаясь понять это.

Пример B - zCoord = (diameter/2) * Math.cos(phi); При этом используется код из periodic table of elements и спирали данные вдоль оси г.

Пример 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