If you want to check out the Codepen, it's right here: http://codepen.io/pehrlich/pen/CogjG
I have a scenario where I need to display a ring geometry in the scene and then dynamically adjust its arc length (thetaLength). Initially, I am initializing it using the constructor, but when I try to modify the thetaLength through a separate function, the results are unexpected.
Below is the function call that I added named setThetaLength, which replicates part of the constructor logic:
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;
}
After calling the setThetaLength function without changing thetaLength, here is what the expected output should look like:
And below is the image showing the result after the function call:
Why is this happening? Could it be due to THREE.js caching some data or altering the order of vertices unexpectedly?
You can also view the codepen example here: http://codepen.io/pehrlich/pen/CogjG
Update: It appears to be related to vertex ordering. When I manually manage the vertex order, the rearrangement works fine.