mat2 mat = [
    a b
    c d
];
vec2 vec = [x,y];
mat*vec = (x*[a,c],y*[b,d]) = (ax+by,cx+dy)

[
    0 -1
    1  0
]

[
  2,0
 -1,1,
 -2,1
]
//这个变换即代表将i变换到（2,-1,-2）,j变换到（0,1,1），从二维空间到三维空间的映射

mat2 m1 = [
    a b
    c d
];
mat2 m2 = [
    e f
    g h
];
//最终方向向量i：
(xi,yi) = m1*[e,g] = e[a,c]+g[b,d] = [ae+bg,ce+dg]
//最终方向向量j：
(xj,yj) = m1*[f,h] = f[a,c]+h[b,d] = [af+bh,cg+dh]
//即复合变换矩阵为：
m1*m2 = [
    ae+bg,ce+dg
    af+bh,cg+dh
]

//以单位向量的乘积（二维为面积为1的正方形，三维为体积为1的立方体）
det([
    0.0,2.0
    -1.5,1.0
]) = 3.0

det([
 0.5,0.5
 -0.5,0.5
]) = 0.5
//压缩成一条直线时(即将空间压缩到更小的维度时)，行列式为0
det([
 4,2
 2,1
]) = 0

det([
 a,b
 c,d
]) = ad - bc
//(a,c)为单位向量i变换后xy坐标
//(b,d)为单位向量j变换后xy坐标
//当b与c都为0，变换后为矩形，面积为ad
//当b或c为0，变换后为平行四边形，面积也为ad
//当b与c都不为0时，得回到定义计算来解释：
//(a+b)(c+d)-ac-bd-2bc=ad-bc
//其实就是有坐标矩形减出变换后平行四边形面积，最后得到ad-bc

A*A^-1 = [
    1,0
    0,1
]

//det(A)!=0
A*x = v
A^-1*A*x = A^-1*v
x = A^-1*v

dot([1,2],[3,4]]) = 1*3 + 2*4
//点积结果大于0，代表两个向量指向大致相同
//点积结果等于0，代表两个向量互相垂直
//点积结果大于0，代表两个向量指向相反

//二维向量叉积（数值代表面积）
cross(vec2(a,b),vec2(c,d)) = det(mat2[
    a,c
    b,d
]) = ad - bc  //方向垂直于（a,b）、（c,d）所在平面，遵循右手定则
//三维向量叉积（数值代表体积）
cross(vec3(v1,v2,v3),vec3(w1,w2,w3)) = det([
    i,v1,w1
    j,v2,w2
    k,v3,w3
]) = i(v2w3-v3w2)+j(v3w1-v1w3)+k(v1w2-v2w1)

//A为基向量变换矩阵，M为变换矩阵
A^-1 * M * A //通常代表在另一坐标系中描述M变换

A*v = λv //矩阵变换等于特征值与向量相乘（降维情况）
A*v-λΙv = 0 //I为单位矩阵
(A-λΙ)v = 0
det(A-λΙ) = 0

vec4 p = [a1,a2,a3,1];//任意点
vec4 w = [b1,b2,b3,0];//任意向量

vec4 p = [x,y,z,1];//初始点  **写按行写，但是意思是列坐标描述点的坐标，左乘
vec4 d = [ax,ay,az,0];//位移向量
vec4 p1 = [x1,y1,z1,1];//位移终点

x1 = x + ax;
y1 = y + ay;
z1 = z + az;

//平移矩阵 T
p1 = T * p; //（行*列）
//其中：
mat4 T = [
    1,0,0,ax,
    0,1,0,ay,
    0,0,1,az,
    0,0,0,1   //用于保持结果为齐次坐标形式
]

p1 = S * p;

x1 = x*bx;
y1 = y*by;
z1 = z*bz;

//其中
mat4 S = [
    bx,0,0,0
    0,by,0,0,
    0,0,bz,0,
    0,0,0,1
]

//1.绕原点的二维旋转
//极坐标公式：
x=rcosϕ
y=rsinϕ
//三角函数正弦余弦公式：
x′=rcos(θ+ϕ)=rcosθcosϕ−rsinθsinϕ
y′=rsin(θ+ϕ)=rsinθcosϕ+rcosθsinϕ
//代入x、y
x′=xcosθ−ysinθ  
y′=xsinθ+ycosθ  
//矩阵表示
[x,y] = R * [x′, y′]
mat2 R = [
    cosθ,−sinθ
    sinθ,cosθ
]
//2.绕任意点的二维旋转
//级联上两次位移矩阵即可（旋转点位移至原点 => 绕原点旋转 => 旋转点移回原位）
v’=T(x,y)*R*T(-x,-y)
//引入三维齐次坐标
mat3 M = [
    1,0,tx,
    0,1,ty,
    0,0,1
] * [
    cosθ,−sinθ,0,
    sinθ,cosθ,0,
    0,0,1
]* [
    1,0,-tx,
    0,1,-ty,
    0,0,1
] = [
    cosθ,−sinθ,,(1−cosθ)tx+ty∗sinθ,
    sinθ,cosθ,(1−cosθ)ty−tx∗sinθ,
    0,0,1
]
//3.三维基本旋转
//引入四维齐次坐标
//绕X轴的旋转：
x′=x
y′=ycosθ−zsinθ
z′=ysinθ+zcosθ
//矩阵表示
mat4 Mx = [
    1,0,0,0,
    0,cosθ,−sinθ,0,
    0,sinθ,cosθ,0,
    0,0,0,1
]
//同理可求得绕Y轴旋转的矩阵My，绕Z轴旋转的矩阵Mz
//任何旋转点在原点的旋转矩阵都可以表示成Mx、My、Mz三个旋转矩阵的级联
//可以将任意旋转轴旋转到与X/Y/Z某一轴重合，执行基本旋转，之后再执行反向旋转恢复旋转轴方向

x1 = x + y*cot(θ);
y1 = y;
z1 = z;

//错切矩阵
mat4 Hx = [
    1,cot(θ),0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,1
]

//欧拉公式（i^2 = -1）
e^iθ = cosθ + isinθ
//复数c的极坐标可以写成 (r^2 = a^2 + b^2)
c = a + ib = re^(iθ)
//设旋转角度为φ
c′ = re^i(θ+φ)  = re^(iθ)e^(iφ) //e^(iφ)即为复平面的一个旋转算子

vec4 a = (q0,q1,q2,q3) = (q0, q); //q为三维向量

const r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
this.r = r ? parseInt(r[1], 16) / 255 : 0;

this.g = r ? parseInt(r[2], 16) / 255 : 0;

this.b = r ? parseInt(r[3], 16) / 255 : 0;

let hex = Number(rgbArr[index]).toString(16);

var ColorKeywords = { 'aliceblue': 0xF0F8FF, 'antiquewhite': 0xFAEBD7, 'aqua': 0x00FFFF, 'aquamarine': 0x7FFFD4, 'azure': 0xF0FFFF ......};

var div = document.createElement('div');
div.style.backgroundColor = color;

document.body.appendChild(div);

var c = window.getComputedStyle(createDiv).backgroundColor;    

document.body.removeChild(div);

 /**
  * @function

  * @description  Generates a matrix that makes something look at something else.

  * @param {vec3} eye Position of the viewer

  * @param {vec3} target Point the viewer is looking at

  * @param {vec3} up vec3 pointing up

  * @returns {Mat4} 

*/
lookAt(eye, target, up) {

   ...
}

mat4 R = [
    ux,uy,uz,0,
    vx,vy,vz,0,
    wx,wy,wz,0,
    0,0,0,1
]
//由eye可得平移矩阵
mat4 T= [
    1,0,0,-eyeX,
    0,1,0,-eyeY,
    0,0,1,-eyeZ,
    0,0,0,1
]
//最后的结果：
mat4 viewMatrix = R * T = [
    ux,uy,uz,-(u0 * eyex + u1 * eyey + u2 * eyez),
    vx,vy,vz,-(v0 * eyex + v1 * eyey + v2 * eyez),
    wx,wy,wz,-(w0 * eyex + w1 * eyey + w2 * eyez),
    0,0,0,1
]

/**
 * Generates a orthogonal projection matrix with the given bounds
 * @private
 * @param {mat4} out mat4 frustum matrix will be written into
 * @param {number} left Left bound of the frustum
 * @param {number} right Right bound of the frustum
 * @param {number} bottom Bottom bound of the frustum
 * @param {number} top Top bound of the frustum
 * @param {number} near Near bound of the frustum
 * @param {number} far Far bound of the frustum
 * @returns {mat4} out
 */
function ortho(out, left, right, bottom, top, near, far) {
    ...
}

//位移矩阵
mat4 T = [
 1,0,0,-(r+l)/2,
 0,1,0,-(t+b)/2,
 0,0,1,-(f+n)/2,
 0,0,0,1
]
//缩放矩阵
mat4 S = [
 2/(r-l),0,0,0,
 0,2/(t-b),0,0,
 0,0,2/(n-f),0,
 0,0,0,1
]
//正交变换矩阵即为：
mat4 N = S * T = [
 2/(r-l),0,0,-(r+l)/(r-l),
 0,2/(t-b),0,-(t+b)/(t-b),
 0,0,-2/(f-n),-(f+n)/(f-n),
 0,0,0,1
]
//如果视见体是对称的(r = -l, t = -b)，还可以进一步简化矩阵
mat4 N = [
 1/r,0,0,0
 0,1/t,0,0,
 0,0,-2/(f-n),-(f+n)/(f-n),
 0,0,0,1
]

/**
 * Generates a perspective projection matrix with the given bounds
 * @private
 * @param {mat4} out mat4 frustum matrix will be written into
 * @param {number} fovy Vertical field of view in radians
 * @param {number} aspect Aspect ratio. typically viewport width/height
 * @param {number} near Near bound of the frustum
 * @param {number} far Far bound of the frustum
 * @returns {mat4} out
 */
export function perspective(out, fovy, aspect, near, far) {
    ...
}

N = [
    1,0,0,0,
    0,1,0,0,
    0,0,a,b,
    0,0,-1,0
]

P = N*S*H = [
    -2n/(r-l),0,(r+l)/(r-l),0,
    0,-2n/(t-b),(t+b)/(t-b),0,
    0,0,-(f+n)/(f-n),2fn/f-n,
    0,0,-1,0
]
//如果视见体是对称的(r = -l, t = -b)，还可以进一步简化矩阵
P = [
 n/r,0,0,0,
 0,n/t,0,0,
 0,0,-(f+n)/(f-n),2fn/f-n,
 0,0,-1,0
]

let maxRadiusSq = 0;
//遍历所有顶点获取到中心的最大距离（即边界球半径）
for (let i = 0, l = array.length; i < l; i += 3) {
    tempVec3.fromArray(array, i);
    maxRadiusSq = Math.max(maxRadiusSq, this.bounds.center.squaredDistance(tempVec3));
}
this.bounds.radius = Math.sqrt(maxRadiusSq);

for (let i = 0, l = array.length; i < l; i += 3) {
    const x = array[i];
    const y = array[i + 1];
    const z = array[i + 2];
    min.x = Math.min(x, min.x);
    min.y = Math.min(y, min.y);
    min.z = Math.min(z, min.z);
    max.x = Math.max(x, max.x);
    max.y = Math.max(y, max.y);
    max.z = Math.max(z, max.z);
}
scale.sub(max, min);
center.add(min, max).divide(2);

frustumIntersectsSphere(center, radius) {
    const normal = tempVec3b;
      //遍历视锥体的六个面
      //若物体中心在视锥体六个面之后(<-radius)，则不在视锥体内
    for (let i = 0; i < 6; i++) {
        const plane = this.frustum[i];
        const distance = normal.copy(plane).dot(center) + plane.constant;
        if (distance < -radius) return false;
    }
    return true;
}

updateFrustum() {
    if (!this.frustum) {
        this.frustum = [new Vec3(), new Vec3(), new Vec3(), new Vec3(), new Vec3(), new Vec3()];
    }
    const m = this.projectionViewMatrix;
  //各平面方程
    this.frustum[0].set(m[3] - m[0], m[7] - m[4], m[11] - m[8]).constant = m[15] - m[12]; // -x
    this.frustum[1].set(m[3] + m[0], m[7] + m[4], m[11] + m[8]).constant = m[15] + m[12]; // +x
    this.frustum[2].set(m[3] + m[1], m[7] + m[5], m[11] + m[9]).constant = m[15] + m[13]; // +y
    this.frustum[3].set(m[3] - m[1], m[7] - m[5], m[11] - m[9]).constant = m[15] - m[13]; // -y
    this.frustum[4].set(m[3] - m[2], m[7] - m[6], m[11] - m[10]).constant = m[15] - m[14]; // +z (far)
    this.frustum[5].set(m[3] + m[2], m[7] + m[6], m[11] + m[10]).constant = m[15] + m[14]; // -z (near)

    for (let i = 0; i < 6; i++) {
        const invLen = 1.0 / this.frustum[i].distance();
        this.frustum[i].multiply(invLen);
        this.frustum[i].constant *= invLen;
    }
}

radius = Math.sqrt(x * x + y * y + z * z);
theta = Math.atan2(x, z);
phi =  Math.acos(Math.min(Math.max(y / radius, -1), 1));

/**
* Handle left click + mouse move event => 旋转

*/

handleMoveRotate(x, y) {

    tempVec2a.set(x, y);

    tempVec2b.sub(tempVec2a, rotateStart).multiply(this.rotateSpeed); //计算变化向量

    let el = this.element === document ? document.body : this.element;

    this.sphericalDelta.theta -= 2 * Math.PI * tempVec2b.x / el.clientHeight; //换算成变换的弧度

    this.sphericalDelta.phi -= 2 * Math.PI * tempVec2b.y / el.clientHeight;

    rotateStart.copy(tempVec2a); //重置变换点

}


/**

* Handle midlle click + mouse move event => 推拉

*/

handleMouseMoveDolly(e) {

    tempVec2a.set(e.clientX, e.clientY);

    tempVec2b.sub(tempVec2a, dollyStart);

    if (tempVec2b.y > 0) { // Up scroll

        this.dolly(getZoomScale(this.zoomSpeed));

    } else if (tempVec2b.y < 0) { // Dwon scroll

        this.dolly(1 / getZoomScale(this.zoomSpeed));

    }

    dollyStart.copy(tempVec2a);

}

dolly(dollyScale) {
    this.sphericalDelta.radius /= dollyScale; //变换radius

}

/**
* Handle mourse wheel event

*/

onMouseWheel(e) {

    const { enabled, enableZoom, state } = this;

    if (!enabled || !enableZoom || (state !== STATE.NONE && state !== STATE.ROTATE)) return;

    e.preventDefault();

    e.stopPropagation();


    if (e.deltaY < 0) {

        this.dolly(1 / getZoomScale(this.zoomSpeed));

    } else if (e.deltaY > 0) {

        this.dolly(getZoomScale(this.zoomSpeed));

    }

}

/**
* Handle right click + mouse move event

*/

handleMovePan(x, y) {

    tempVec2a.set(x, y);

    tempVec2b.sub(tempVec2a, panStart).multiply(this.panSpeed); //计算变化向量

    this.pan(tempVec2b.x, tempVec2b.y);

    panStart.copy(tempVec2a);

}

pan(deltaX, deltaY) {

    let { element, camera } = this;

    let el = element === document ? document.body : element;
    // perspective

    tempVec3.copy(camera.position).sub(this.target);

    let targetDistance = tempVec3.distance();
    // half of the fov is center to top of screen

    targetDistance *= Math.tan(((camera.fov || 45) / 2) * Math.PI / 180.0); //投影高度

    // we use only clientHeight here so aspect ratio does not distort speed
    this.panLeft(deltaX * 2 * targetDistance / el.clientHeight, camera.matrix); //高度比值

    this.panUp(deltaY * 2 * targetDistance / el.clientHeight, camera.matrix);

};

panLeft(distance, m) {

    tempVec3.set(m[0], m[1], m[2]);//X

    tempVec3.multiply(-distance);

    this.panDelta.add(tempVec3);

}

panUp(distance, m) {

    tempVec3.set(m[4], m[5], m[6]);//Y

    tempVec3.multiply(distance);

    this.panDelta.add(tempVec3);

}

static buildPlane(position, normal, uv, index, width, height, depth = 0, wSegs, hSegs,

        u = 0, v = 1, w = 2,
        uDir = 1, vDir = -1,
        i = 0, ii = 0
    ) {
        const io = i;
        const segW = width / wSegs;
        const segH = height / hSegs;

        for (let iy = 0; iy <= hSegs; iy++) {
            let y = iy * segH - height / 2; //y = [-h/2,h/2]
            for (let ix = 0; ix <= wSegs; ix++) {
                let x = ix * segW - width / 2; //x = [-w/2,w/2]

                position[i * 3 + u] = x * uDir;
                position[i * 3 + v] = y * vDir; // eg:leftTopfirPos = [-w/2,h/2]
                position[i * 3 + w] = depth / 2;

                normal[i * 3 + u] = 0;
                normal[i * 3 + v] = 0;
                normal[i * 3 + w] = depth >= 0 ? 1 : -1;

                uv[i * 2] = ix / wSegs;
                uv[i * 2 + 1] = 1 - iy / hSegs;

                i++;

                if (iy === hSegs || ix === wSegs) continue;

                //indices(two triangle)
                let indicesWSegs = (wSegs + 1);
                let a = io + ix + iy * indicesWSegs; //iy * indicesWSegs => a rows
                let b = io + ix + (iy + 1) * indicesWSegs;
                let c = io + (ix + 1) + (iy + 1) * indicesWSegs;
                let d = io + (ix + 1) + iy * indicesWSegs;

                index[ii * 6] = a;
                index[ii * 6 + 1] = b;
                index[ii * 6 + 2] = d;

                index[ii * 6 + 3] = b;
                index[ii * 6 + 4] = c;
                index[ii * 6 + 5] = d;

                ii++;
            }
        }
    }

 // left, right
 Plane.buildPlane(position, normal, uv, index, depth, height, width, dSegs, hSegs, 2, 1, 0, -1, -1, i, ii); //ZYX

Plane.buildPlane(position, normal, uv, index, depth, height, -width, dSegs, hSegs, 2, 1, 0, 1, -1, i += (dSegs + 1) * (hSegs + 1), ii += dSegs * hSegs);


// top, bottom

Plane.buildPlane(position, normal, uv, index, width, depth, height, dSegs, hSegs, 0, 2, 1, 1, 1, i += (dSegs + 1) * (hSegs + 1), ii += dSegs * hSegs); //XZY

Plane.buildPlane(position, normal, uv, index, width, depth, -height, dSegs, hSegs, 0, 2, 1, 1, -1, i += (wSegs + 1) * (dSegs + 1), ii += wSegs * dSegs);


// front, back

Plane.buildPlane(position, normal, uv, index, width, height, -depth, wSegs, hSegs, 0, 1, 2, -1, -1, i += (wSegs + 1) * (dSegs + 1), ii += wSegs * dSegs); //XYZ

Plane.buildPlane(position, normal, uv, index, width, height, depth, wSegs, hSegs, 0, 1, 2, 1, -1, i += (wSegs + 1) * (hSegs + 1), ii += wSegs * hSegs);

//画个图+三角函数
let x = -radius * Math.sin(tStart + v * tLength) * Math.cos(pStart + u * pLength);
let y = radius * Math.cos(tStart + v * tLength);

let z = radius * Math.sin(tStart + v * tLength) * Math.sin(pStart + u * pLength);