Three.js 源码剖析之旅：Renderer（一）

2023-09-30 14:41:42

Three.js Renderer 深度剖析：开启 WebGL 之门

WebGLRenderer：Three.js 的渲染引擎

Three.js 是一个强大的 JavaScript 库，它为我们打开了 WebGL 的大门，让我们能够轻松创建 3D 场景。WebGLRenderer 是 Three.js 的核心之一，它负责将 3D 场景渲染到屏幕上。

WebGLRenderer 是一个基于 WebGL 的渲染器，它利用显卡的强大功能来渲染 3D 场景。在 Three.js 中，初始化 WebGLRenderer 非常简单：

const renderer = new THREE.WebGLRenderer();

然后，我们可以使用 renderer.render() 方法将场景渲染到屏幕上：

renderer.render(scene, camera);

源码剖析

让我们深入 WebGLRenderer 的源码，看看它是如何工作的。

构造函数

WebGLRenderer 的构造函数接受一个 parameters 对象作为参数，其中包含一些配置选项，如 domElement、width、height 等。其中，domElement 参数指定了要渲染到的 HTML 元素。

constructor(parameters) {
  ...
  this.domElement = parameters.domElement !== undefined ? parameters.domElement : document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
  ...
}

渲染方法

render() 方法首先获取场景和相机的矩阵，然后遍历场景中的所有对象。对于每个对象，它都会设置对象的变换矩阵，并调用 renderObject() 方法来渲染对象。

render(scene, camera) {
  ...
  // 获取场景和相机的矩阵
  const matrixWorldInverse = camera.matrixWorldInverse;
  const projectionMatrix = camera.projectionMatrix;
  ...
  // 遍历场景中的所有对象
  scene.traverseVisible(object => {
    ...
    // 设置对象的变换矩阵
    object.modelViewMatrix.multiplyMatrices(matrixWorldInverse, object.matrixWorld);
    ...
    // 渲染对象
    this.renderObject(object, camera);
    ...
  });
  ...
}