问RingGeometry的THREE.js重新定位顶点
EN

Stack Overflow用户

提问于 2014-10-15 07:05:12

回答 1查看 491关注 0票数 0

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后的预期结果：

这是调用之后的图像：

到底怎么回事？是THREE缓存了一些信息，还是以意想不到的方式改变了顶点顺序？

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

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

javascript

three.js

回答 1

Stack Overflow用户

发布于 2014-10-16 19:46:01

回答了我自己的问题。循环通过段时出现off by one错误。

以下是更改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;

};