Javascript THREE.js为环形几何体重新定位顶点

Codepen可在以下位置获得：

我想在场景中渲染一个环形几何体，然后动态更改它的弧长和长度。首先，我调用它的构造函数，然后调用定位顶点的代码。然而，这会导致奇怪的结果

下面是方法调用-基本上是从构造函数中复制的，并给出了一个新名称setThetaLength：

THREE.RingGeometry.prototype.setThetaLength = function(thetaLength){

//  this.thetaLength = thetaLength;


  var i, o, uvs = [], radius = this.innerRadius, radiusStep = ( ( this.outerRadius - this.innerRadius ) / this.phiSegments );

    for ( i = 0; i < this.phiSegments + 1; i ++ ) { // concentric circles inside ring

        for ( o = 0; o < this.thetaSegments + 1; o ++ ) { // number of segments per circle

            var vertex = this.vertices[i + o]; // maybe i need to query vertex indices here.
            var segment = this.thetaStart + o / this.thetaSegments * this.thetaLength;
            vertex.x = radius * Math.cos( segment );
            vertex.y = radius * Math.sin( segment );

//          uvs.push( new THREE.Vector2( ( vertex.x / this.outerRadius + 1 ) / 2, ( vertex.y / this.outerRadius + 1 ) / 2 ) );
        }

        radius += radiusStep;

    }


    this.computeFaceNormals();

    this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius );

  this.verticesNeedUpdate = true;

}

以下是原始绘图，以及在调用SetTalength而不更改Talength后的预期结果：

THREE.RingGeometry.prototype.setThetaLength = function(thetaLength){

//  this.thetaLength = thetaLength;


  var i, o, uvs = [], radius = this.innerRadius, radiusStep = ( ( this.outerRadius - this.innerRadius ) / this.phiSegments );

    for ( i = 0; i < this.phiSegments + 1; i ++ ) { // concentric circles inside ring

        for ( o = 0; o < this.thetaSegments + 1; o ++ ) { // number of segments per circle

            var vertex = this.vertices[i + o]; // maybe i need to query vertex indices here.
            var segment = this.thetaStart + o / this.thetaSegments * this.thetaLength;
            vertex.x = radius * Math.cos( segment );
            vertex.y = radius * Math.sin( segment );

//          uvs.push( new THREE.Vector2( ( vertex.x / this.outerRadius + 1 ) / 2, ( vertex.y / this.outerRadius + 1 ) / 2 ) );
        }

        radius += radiusStep;

    }


    this.computeFaceNormals();

    this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius );

  this.verticesNeedUpdate = true;

}

以下是通话后的图像：

发生什么事了？三是缓存一些信息，还是以意外的方式更改顶点顺序

请参阅此代码笔：

---

编辑：它确实看起来像顶点排序。如果我强制顶点顺序，那么我可以重新排列ok。

回答了我自己的问题。在段之间循环时出现了一个“关闭一个”错误

下面是更改THREE.JS球体的phi的完整方法：

THREE.SphereGeometry.prototype.setPhiLength = function(phiLength){

  this.parameters.phiLength = phiLength;

  var heightSegments  = this.parameters.heightSegments,
      widthSegments   = this.parameters.widthSegments,
      radius          = this.parameters.radius,
      phiStart        = this.parameters.phiStart,
      thetaLength     = this.parameters.thetaLength,
      thetaStart      = this.parameters.thetaStart;


  var x, y;

    for ( y = 0; y <= heightSegments; y ++ ) {

        for ( x = 0; x <= widthSegments; x ++ ) {

            var u = x / widthSegments;
            var v = y / heightSegments;

            var vertex = this.vertices[(y * (widthSegments + 1)) + x];
            vertex.x = - radius * Math.cos( phiStart + u * phiLength ) * Math.sin( thetaStart + v * thetaLength );
            vertex.y = radius * Math.cos( thetaStart + v * thetaLength );
            vertex.z = radius * Math.sin( phiStart + u * phiLength ) * Math.sin( thetaStart + v * thetaLength );


        }

    }

  this.verticesNeedUpdate = true;

};