阅读Three.js源码

如果你接触threejs有一定时间了，也能写一些简单的项目，这时候可以尝试预览下Threejs的源码，通过Threejs的源码可以了解很多知识。

查看Threejs文件包的src目录

查看所有版本 (opens new window)链接：http://www.webgl3d.cn/pages/aac9ab/

你可以在github上下载随便一个版本的threejs文件包，解压后，可以看到一个src目录文件，里面就是threejs所有类对应的代码。

查询特定类的源码

比如所有模型对象的父类Object3D,对应的文件地址./src/core/Object3D.js。

比如三维向量类Vector3,对应的文件地址./src/math/Vector3.js。

查看类某个方法的源码

查看三维向量类Vector3,方法copy和clone对应的源码，有些时候，你查看threejs某个类的源码，相比文档，会更加清晰。

// 复制参数的值，返回的还是执行该方法的对象
copy( v ) {
	this.x = v.x;
	this.y = v.y;
	this.z = v.z;
	return this;
}
// 返回一个新的对象
clone() {
	return new this.constructor( this.x, this.y, this.z );
}

renderers目录

renderers目录里面主要WebGl渲染器相关的代码，是src目录下最复杂的。如果想你查看里面的代码，请确保你已经入门原生WebGL，否则你很难理解。

WebGLRenderer.js文件对应的其实就是WebGL渲染器类WebGLRenderer。

renderers/shaders目录

Three.js所有的材质Material本质上就是shader，也就是GLSL代码。

所有材质对应的shader代码，你可以查看目录renderers/shaders。

如果你想通过材质.onBeforeCompile方法修改threejs默认的shader，就需要去大概熟悉renderers/shaders目录中的文件。

今天视频时间有限，如果你想了解更多具体进阶内容，可以选择报名咱们的Three.js可视化系统课程WebGL (opens new window)。

相应应用，比如智慧城市shader特效 (opens new window)、地球飞线特效 (opens new window)。