看Three.js example--Apple的学习笔记

Three.js的css3d_sprites.html的example效果吸引了我，所以我要学习下。
里面有2个关键点，一个是Tween.js导致的动画效果，另外一个是创建点的位置。1个是random，1个是cube，1个是波浪。这都好理解。但是球体中的theta和phi的关系我还不理解，修改theta和phi的映射关系后，发现图形中螺旋线的数量变少，离散程度变少。var theta = Math.sqrt( particlesTotal * Math.PI ) * phi; 的依据是什么，留着将来看到相关资料再解决。

phi的是按照弧度来设置每个点的角度。查球坐标系相关资料也可以知道。

                // Sphere

                var radius = 750;

                for ( var i = 0; i < particlesTotal; i ++ ) {

                    var phi = Math.acos( - 1 + ( 2 * i ) / particlesTotal );
                    var theta = Math.sqrt( particlesTotal * Math.PI ) * phi;  

                    positions.push(
                        radius * Math.cos( theta ) * Math.sin( phi ),
                        radius * Math.sin( theta ) * Math.sin( phi ),
                        radius * Math.cos( phi )
                    );

                }

cube说明x轴/y轴/z轴分为8等分。particlesTotal为512。其实888=512个。separation可以理解为步长。就是指2个object的间隔距离。
x = i%amount这样就限制了x轴范围为0-7。
y = ( i / amount ) % amount这样说明x在0-7的时候，它一直保持0，当8-15的时候它为1,依次类推。那么说明是按x轴先排列，排到满后，在沿着y轴排列。
再看看
z=i / ( amount * amount )% amount。说明第一个xy面8*8=64个排列完成后，开始排z轴，z轴方向加1。

                // Cube

                var amount = 8;
                var separation = 150;
                var offset = ( ( amount - 1 ) * separation ) / 2;  //525

                for ( var i = 0; i < particlesTotal; i ++ ) {

                    var x = ( i % amount ) * separation;
                    var y = Math.floor( ( i / amount ) % amount ) * separation;
                    var z = Math.floor( i / ( amount * amount ) ) * separation;

                    positions.push( x - offset, y - offset, z - offset );

                }