THREE.js重新定位RingGeometry的顶点

Question

Codepen可在此处找到：http://codepen.io/pehrlich/pen/CogjG

我想在场景中渲染一个环形几何体，然后动态地改变它的arcLength（thetaLength）。首先，我称之为构造函数，然后调用定位顶点的代码。但是，这会导致奇怪的结果。

这是方法调用 - 基本上是从构造函数中复制并给出了一个新名称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;

}

这是原始的绘制，以及在不改变thetaLength的情况下调用setThetaLength之后的期望：

这是电话后的图像：

发生了什么事？是三个缓存一些信息，还是以意想不到的方式改变顶点顺序？

请参阅此代码：http://codepen.io/pehrlich/pen/CogjG

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

Answer 1

回答了我自己的问题。循环遍历段时出现一个错误。

这是一个改变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;

};