3DMath

坐标系

  • 左右手坐标系
  • 多坐标系

向量

  • 分量:3D 向量顾名思义就是处于三维坐标系中的,由 x、y 和 z 进行分量的构成
  • 平行四边形法则:向量之间的加减法
  • 向量 & 标量 的乘除
  • 模长:向量的长度大小:x、y 和 z 的平方和再开根号
  • 单位向量,也就是模长为 1 的向量
  • 向量的归一化:也就是将 模长 变成 1 —— 向量的各个分量除以模长
  • 向量点积:两个向量的分量进行相乘得到的结果再相加,得到的是一个标量值 == (两个向量的模长乘积再乘以两向量夹角的余弦值)
  • 叉积运算:叉积得到的向量其实是一个垂直向量,垂直于两个进行叉积的向量构建的平面

矩阵

  • 基本
    • 意义:向量是标量的数组,矩阵是向量的数组,矩阵能够表示几何变换,其中方阵表示线性变换。
      1
      2
      3
      4
      // 3(行) * 3(列)
      [m11,m12,m13]
      [m21,m22,m23]
      [m31,m32,m33]
    • 维度:向量的维度是它所含数字的个数,矩阵的维数是它所的行数和列数。
    • 方阵:行数和列数相同的矩阵,方阵中行号和列号相同元素叫做 对角元素 ,其他叫 非对角元素
      • 单位矩阵: 对角元素为 1 ,非对角元素 为 0
      • 对角矩阵:非对角元素 为 0
        1
        2
        3
        4
        5
        6
        7
        8
        // 单位矩阵
        [1 0 0]
        [0 1 0]
        [0 0 1]
        // 对角矩阵
        [x 0 0]
        [0 x 0]
        [0 0 x]
  • 矩阵的转置:一个矩阵的行和列进行调换位置
    1
    2
    3
    4
    5
    6
    7
    8
    // origin
    [1,2,3]
    [4,5,6]
    [7,8,9]
    // result
    [1,4,7]
    [2,5,8]
    [3,6,9]
  • 运算
    • 加减:同型的矩阵才能进行加减(行数和列数都相同的矩阵才有所谓的加减运算:对应位置相加减即可)
    • 乘法:第一个矩阵的行乘以第二个矩阵的列得到的数再相加得到结果矩阵的元素
      • 成立条件: (N * M) * (S * T) => M 和 S 相等才能进行相乘
      • 矩阵相乘满足结合律不满足交换律,乘法结果和顺序相关:左乘和右乘(矩阵的转置以相反的顺序相乘)
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        [1,2,3]
        [4,5,6]
        [7,8,9]
        *
        [11,22,33]
        [44,55,66]
        [77,88,99]
        =
        [1 * 11 + 2 * 44 + 3 * 77, 1 * 22 + 2 * 55 + 3 * 88, 1 * 33 + 2 * 66 + 3 * 99]
        [4 * 11 + 5 * 44 + 6 * 77, 4 * 22 + 5 * 55 + 6 * 88, 4 * 33 + 5 * 66 + 6 * 99]
        [7 * 11 + 8 * 44 + 9 * 77, 7 * 22 + 8 * 55 + 9 * 88, 7 * 33 + 8 * 66 + 9 * 99]
    • 矩阵和向量的乘法
    • 矩阵和标量的乘法

矩阵应用

2D

  • 平移矩阵
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    [x,y,1]
    *
    [1 ,0 ,0]
    [0 ,1 ,0]
    [dx,dy ,1]
    =
    [
    x * 1 + y * 0 + dx * 1,
    x * 0 + y * 1 + 1 * dy,
    x * 0 + y * 0 + 1 * 1
    ]
    =>
    [x + dx , y + dy , 1]
  • 旋转矩阵
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // a 为旋转 弧度 angle = deg * 360 / PI
    [x,y]
    *
    [cos(a) ,sin(a)]
    [-sin(a) ,cos(a)]
    =
    [
    x * cos(a) + -sin(a) * y ,
    x * sin(a) + cos(a) * y
    ]
  • 缩放矩阵
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // kx /ky 是缩放因子
    [x,y]
    *
    [kx,0]
    [0,ky]
    =
    [
    x * kx + y * 0,
    x * 0 + y * ky
    ]
    =>
    [x * kx , y * ky]

3D

  • 平移
    1
    2
    3
    4
    [1  ,0  ,0  ,0]  
    [0 ,1 ,0 ,0]
    [0 ,0 ,1 ,0]
    [dx ,dy ,dz ,0]
  • 缩放
    1
    2
    3
    4
    [sx ,0  ,0  ,0]
    [0 ,sy ,0 ,0]
    [0 ,0 ,sz ,0]
    [0 ,0 ,0 ,1]
  • 旋转
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // x
    [1 ,0 ,0 ]
    [0 ,cons(a) ,sin(a)]
    [0 ,-sin(a) ,cons(a)]

    // y
    [cons(a) ,0 ,sin(a)]
    [0 ,1 ,0 ]
    [-sin(a) ,0 ,cons(a)]

    // z
    [cons(a) ,sin(a) ,0]
    [-sin(a) ,cons(a) ,0]
    [0 ,0 ,1]

react-router-question

react-router 的组件化一直以来引人非议,但这却非常迎合 react 的技术思想 。这种很别扭的 router 写法,让很多人都希望写 状态式的 或者直接把 开发文件路径 当成路由(创建工程文件就是创建路由)。

组件化一切

react 早期的 router 都是状态化的…

但是后面是官方宣扬 component 思想之后才改变的。他们喜欢把组件分 UI Component 和 Container Component。前者很好理解,就是我们日常写的 UI 组件,99%的普通开发者基本都是在写 UI Component 。而负责数据和业务逻辑的后者应该只有库/框架 开发者在写。react-redux 如此,react-router 也是如此。

但是达成这种思想的根本核心还是 react 中数据流在组件中是单向流动的特性。这个特性从 react 面世之初就带这着一个 facebook 中永远取消不了的未读信息这个 bug 让人熟记,而且也是 react 确保数据来源唯一性的重要手段。但又约束了众多第三方库中开发思维。
作为一个 router 管理库,其核心就是把一系列 状态 管理在一个地方,方便开发者在想用的时候用。但是想要把 状态 灵活的插入指定的组件而不依靠第三方数据流管理库的话:加个父组件嵌套是最理想的。

typescript

用了大半年的 typescript
说实话,非常失望。
应该是太过于期待 typescript 是一个拥有新时代语言特性。
但实际上却只是一个大型语法糖。
runtime 里面,连简单大的类型判断都不能用,应该在 runtime 的时候,它依旧是 javascript