Создайте пользовательскую часть сферической формы в Three.js

Question

У меня есть сфера в THREE.js (я назову ее главной сферой). Мой пользователь имеет возможность щелкнуть несколько точек на шаре, чтобы отметить углы многоугольника. Сами точки представлены в виде сфер в трехмерном пространстве и опираются на поверхность основной сферы. Когда есть три или более точек, пользователь может закрыть их и построить многоугольник.

В этот момент я хотел бы создать многоугольник прямо над поверхностью основной сферы. Этот многоугольник должен быть в форме того, который только что построил пользователь, а также поднялся над поверхностью главной сферы.

Я думал, что смогу создать многоугольник на поверхности сферы, а затем вытеснить каждую вершину в обычном порядке с помощью вершинного шейдера, поэтому я построил форму, используя THREE.Shape и THREE.ShapeGeometry. Это приводит к двумерной форме на оси z, поэтому я перевел форму на поверхность, а затем использовал различные комбинации THREE.SubdivisionModifier и THREE.TessellateModifier в попытке создать вершины для смещения шейдера. Кроме того, форма даже не видна после перевода, если я не использовал модификатор.

В настоящее время я использую следующую комбинацию из двух, но это приводит к очень искаженной форме.

// Create a new instance of the modifier and pass the number of divisions. 
var subdivisionModifier = new THREE.SubdivisionModifier(3); 
var tessellateModifier = new THREE.TessellateModifier(8); 

// Apply the modifier to our cloned geometry. 
for(var x=0; x<6; x++) { 
    tessellateModifier.modify(polyGeometry); 
} 

subdivisionModifier.modify(polyGeometry); 

Результаты в следующем: желтый контур желаемая форма, в то время как синий контур является то, что создается. Зеленый каркас - это основная сфера.

Я построил JSFiddle для моего проекта здесь: Globe with elevated polygon

Как вы можете видеть, полученный многоугольник не принимает нужную форму. В конце концов, я думаю, мне нужно знать, иду ли я по тупиковой тропе, и если то, что я пытаюсь сделать, даже возможно.

Answer 1

Мне удалось найти создание сетки со множеством вершин, уменьшив параметр максимальной длины края, переданный в THREE.TessellateModifier и увеличив количество приложений. После этого мне не понадобился модификатор подразделения.

Окончательный код приведен ниже:

вар tessellateModifier = новый THREE.TessellateModifier (+0,01);

 //subdivisionModifier.modify(polyGeometry); 

     // Apply the modifier to our cloned geometry. 
     for(var x=0; x<25; x++) { 
      tessellateModifier.modify(polyGeometry); 
     } 

Кроме того, нет необходимости прибегать к вершинному шейдеру, чтобы исказить сетку. Использование функции setLength() каждой вершины позволяет вытеснить их для создания изогнутого многоугольника, который находится чуть выше поверхности земного шара.

//push each vertex to just above the surface of the globe 
      for(var i = 0; i < this.polyMesh.geometry.vertices.length; i++){ 
       this.polyMesh.geometry.vertices[i] = this.polyMesh.geometry.vertices[i].setLength(this.surfaceDisplacement); 
      }