在Three.js中创建用户定义的球形部分

Question

我在THREE.js中有一个球体（我将它称为主球体）。我的用户可以单击球体上的多个点来标记多边形的角。点本身在3D空间中表示为球体，并且位于主球体的表面上。一旦放置了三个或更多点，用户就可以关闭它们并构建多边形。

此时我想在主球体表面上方创建一个多边形。这个多边形的形状应该是用户刚构建的形状，并且也应该高出主球体表面的上方。

我认为我可以在球体表面创建一个多边形，然后使用顶点着色器在其法线上移动每个顶点，因此我使用THREE.Shape和THREE.ShapeGeometry构建了一个形状。这会在z轴上产生2D形状，因此我接下来将形状转换为曲面，然后使用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的最大边长度参数并增加应用程序的数量，我能够找到创建具有多个顶点的网格。我事后并不需要细分修饰符。

最终代码如下：

var tessellateModifier = new THREE.TessellateModifier（.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);
            }