种种原因，没有看Three源码吧，重新看起来吧。
之前看了math文件夹下的 Vector , Matrix , Math 以及关于旋转的 Euler 和 Quaterion 。接下来，还是接着看这个文件夹下的内容吧，应该还有一些基础的数据结构。

那么就先来看下math下的一些坐标系吧。

Spherical

球坐标，三个分量。

  • radius: 半径
  • phi: 和y轴夹角
  • theta: 和z轴夹角

注意Three用的是右手坐标系，所以这个phi和theta与wikipedia里边的描述有一点差异。

makeSafe

  1. // restrict phi to be betwee EPS and PI-EPS
  2. makeSafe: function () {
  3.     var EPS = 0.000001;
  4.     this.phi = Math.max( EPS, Math.min( Math.PI - EPS, this.phi ) );
  5.     return this;
  6. }

这算是一个常见的在处理3D图形的时候，需要考虑的误差问题，防止角度过小出现特殊情况。

setFromCartesianCoords

  1. setFromCartesianCoords: function ( x, y, z ) {
  2.     this.radius = Math.sqrt( x * x + y * y + z * z );
  3.     if ( this.radius === 0 ) {
  4.         this.theta = 0;
  5.         this.phi = 0;
  6.     } else {
  7.         this.theta = Math.atan2( x, z );
  8.         this.phi = Math.acos( _Math.clamp( y / this.radius, - 1, 1 ) );
  9.     }
  10.     return this;
  11. }

笛卡尔坐标系到球坐标转变。
image.png
还是比较清晰的，至少算是验证了之前对phi和theta的理解。

这里也放一下在 Vector3 里的球坐标转化为笛卡尔坐标的函数：

  1. setFromSphericalCoords: function ( radius, phi, theta ) {
  2.     var sinPhiRadius = Math.sin( phi ) * radius;
  3.     this.x = sinPhiRadius * Math.sin( theta );
  4.     this.y = Math.cos( phi ) * radius;
  5.     this.z = sinPhiRadius * Math.cos( theta );
  6.     return this;
  7. }

SphericalHarmonics3

了不得！！这个在Three的文档里没有看到，应该是应用于内部的一些功能，看注释中的论文，应该是，用户材质贴图的时候，这个先放下，之后再看。对应的论文：envmap.pdf

看样子，是用9个vector3来表示一个坐标，可能有某种特殊的表示和计算的便利吧。

不过这个Spherical Harmonics需要了解下：https://en.wikipedia.org/wiki/Spherical_harmonics
envmap.pdf

Cylindrical

圆柱体坐标系。也是相对清楚的。

  • radius：半径
  • theta：和z轴夹角，与球坐标类似
  • y：高度信息

笛卡尔坐标转圆柱坐标就相对来说很简单了，不再赘述