threejs 源码解析_ThreeJS 源码剖析之 Renderer（一）

引子

最近，忽然想起曾在 WebGL 基础系列 文章中立下 flag：“后续还打算出 《ThreeJS 源码剖析》 系列”(特意翻出原话 )，项目忙了一阵后，便决定开始写此系列，更新周期不固定，毕竟项目排期“天晓得”。此系列与其说是分享，倒不如说是共同学习罢了。作为最出名的 WebGL 的开源库，ThreeJS 已受到了广泛认可和好评，同时其自身也在不断更新，让开发者用的舒心放心。

说回自己，本初入图形学世界，仅凭个人兴趣撞的鼻青脸肿，但也乐在其中。自认为技术本不该有距离感，以有趣且通俗易懂的方式传播技术也是一件趣事。任凭其吹的天花乱坠，何等高大上，但其本质是服务于我们的，归根结底还是要我们接受才可。故之前的文章也尽量保持着基础、有趣、易懂的风格(偶尔会开开车 )，未来亦会尝试更多元的文章风格。但其宗旨都是为了让各位更容易接受。

以上仅个人观点，如与各位观念有相悖之处，可相互交流，以彼之长补己之短。

下面正式开始 ThreeJS 源码剖析 系列

前言

当学习一种新技术时，大部分情况都会首选其官方文档，而文档中能最快让我们上手的章节便是 Getting Started。ThreeJS 也不例外，我们进入到其对应的 Getting Started 页面后，便能看到 Creating the scene 的代码仅有下面寥寥几行：

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

再滚动至最下方，各位会看到完整的 Demo：

// ...var animate = function () {

requestAnimationFrame( animate );

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render( scene, camera );

};

animate();

阅读完简单的十几行代码之后，各位可能会发现这个 Demo 中在一直调用 animate() 方法，而此方法中我们修改了立方体的旋转角度，并执行了这一行代码：renderer.render( scene, camera )。假如你没有接触过图形学或 WebGL，仅凭语义会翻译成：“渲染器渲染场景和