「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。

之前，已经写过一篇Object3D的源码解读，不过那个已经是2个多月前的理解，随着学习的深源码1688入，笔者决定重新解读一遍。

three.js@0.134.0源码解读之重读Object3D

3d坐标系

3d对象一计算机图形学之父个最重要的特性是它在三维世界中的坐标位置，真实世界建模所抽象出的场景(Scene)，相机(Camera),光源(Light),物体(Geometry)都是Object源码3D对象的子类。

每一个3d对象都有其自己的矩阵的迹坐标系统，这里所说的世界坐标系，就是Scene的坐标系统。

世界坐标系之左手坐标系

每一个3d对象都有自己的坐标原点，场景(Scene)对象也不例外。

想象自己将手腕矩阵的逆放在3d对象计算机图形学实验报告原点，然后大拇指正对自己，中指水平垂直于大拇指，食指竖直于大拇指。 大拇指源码编辑器x向量，食指z向量，中指y计算机图形学就业方向向量分别作直线，我们得到了一个左手坐标系。

以这个左手坐标系为出发点，我们像场景中添加相机，光源和物体。

如上图所示。

相机坐标系

相机坐标系是以相机的聚焦中心为原点，以光轴为Z轴建立的三维直角坐标系。

three.js@0.134.0源码解读之重读Object3D

three.js@0.134.0源码解读之重读Object3D

一般，我们会得到物体在世界坐标系的位置。

这个世界坐标系是有限定范围的计算机图形学应用领域，也就是说它是在标准坐标系之内的，超出了标准坐标系范围的物体部分，将不会矩阵和行列式的区别显示在显卡中。

下图是标准坐标系的示意图。

three.js@0.134.0源码解读之重读Object3D

我们想要在屏幕上正确显示3d矩阵世界，首先需要世界坐标系数据，然后经过如下的变换，得到最终的显示效果:

graph TD
世界坐标系 --> 相机坐标系 --> 标准坐标系 --> 标准设备坐标系

具体代码实现如下:

      // 矩阵用于计算空间变换下顶点坐标的位置
        mat4.perspective(projectionMatrix,
            fieldOfView,
            aspect,
            zNear,
            zFar);

gl_Position = uProjectionMatrix * aVertexPosition;

除了矩阵转置上述所说的投影变换，世界总是处在变化之中的，要模拟变化的世界，需要依靠模型视变换矩阵。

其变换过程与坐标系变换过程类似，此处不再详细说计算机图形学课后答案明:

 mat4.rotate(modelViewMatrix,  // destination matrix
            modelViewMatrix,  // matrix to rotate
            cubeRotation * 0.1,     // amount to rotate in radians
            [0, 0, 1]);       // axis to rotate around (Z)

 gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;

数学库

Object3D对象为了实现投影变换与模型视变换所用到的数学库

  • Quaternion，四元数，用于三维空间旋转操作。
  • Vector3,三维向量，空间向量。
  • Matrix4, 四维矩阵。
  • Euler,欧拉。
  • Matrix3，三维矩阵。
  • MathUtils源码时代，数学工具。

这些数学库的学习非常陡峭，如果时间上来不及，可以暂时只有一个大概的理解，这些变换已经被封装好了，我们不用操心背后的数学原理。

但是，如果你想要真正学号计算机图形学，线性代数是必须精通的课程。