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

Question

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

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

我想我可以在球体的表面创建一个多边形，然后使用顶点着色器在其法线上置换每个顶点，所以我使用 THREE.Shape 和 [=29= 构建了一个形状]几何学。这会在 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);
            }

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

Create User Defined Portion of Spherical Shape in Three.js

javascript

three.js