javascript - THREE.js reposition vertices for RingGeometry -
javascript - THREE.js reposition vertices for RingGeometry -
codepen available here: http://codepen.io/pehrlich/pen/cogjg
i want render ring geometry in scene, , dynamically alter it's arclength (thetalength). start with, i'm calling it's constructor, , recalling code positions vertices. however, causes unusual results.
here's method phone call - copied constructor , given new name of setthetalength:
three.ringgeometry.prototype.setthetalength = function(thetalength){ // this.thetalength = thetalength; var i, o, uvs = [], radius = this.innerradius, radiusstep = ( ( this.outerradius - this.innerradius ) / this.phisegments ); ( = 0; < this.phisegments + 1; ++ ) { // concentric circles within ring ( o = 0; o < this.thetasegments + 1; o ++ ) { // number of segments per circle var vertex = this.vertices[i + o]; // maybe need 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; }
here's original draw, , expect after calling setthetalength
without changing thetalength:
here's image, after call:
what's going on? 3 caching information, or changing vertex order in unexpected ways?
see codepen: http://codepen.io/pehrlich/pen/cogjg
edit: indeed vertex ordering. if forcefulness vertex order, can rearrange ok.
answered own question. having off 1 error when looping through segments.
here finish method alter phi of three.js sphere:
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; ( y = 0; y <= heightsegments; y ++ ) { ( 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; };
javascript three.js
Comments
Post a Comment