Three.js 如何学习 WebGL 和 Three.js

Question

当你开始思考你应该如何学习 WebGL 和 Three.js 的时候，相信你至少对相关的关键词了解过了，希望通过 WebGL 或 Three.js 实现你想要的 Web3D 功能，也许你也会去思考通过 WebGL 或 Three.js 能不能实现你想要的功能，也许你是因为领导临时分配任务，还不太清楚 WebGL 和 Three.js 是什么，个人建议是不要做过多思考，先看看相关的具体技术教程，随着时间的推移你自然会明白 Canvas、WebGl、Three.js 等关键词指什么。

当前看到这篇文章的时候，建议先阅读一遍，然后学习到一定程度，再来看一次，也许会有新的收获。

要不要学习 WebGl？

Three.js 是基于原生 WebGl API 和着色器封装得到的3D引擎，也就是一个.js库。通过原生WebGL直接编写程序，会比较麻烦，一般开发项目直接使用Three.js引擎。简单的项目一般也用不到底层 WebGL 知识，不过学习 WebGl 有助于深入理解Three.js，如果使用Three.js开发项目需要自定义着色器的时候，肯定也是要学习底层 WebGL 和着色器GLSL知识。

总而言之，如果你想成为Web3D应用开发的大牛，学习WebGL肯定是必须的。

WebGL 和 Three.js 学习顺序？

• 如果你急于要实现一个Web3D功能，时间有限，也没有图形学基础，个人建议直接学习先Three.js即可，以后想深入掌握，可以学习原生WebGL和图形学相关知识。
• 如果时间比较充足，又希望有更大的成长空间，学习底层原生WebGL肯定是必要的，可以WebGL和Threejs结合着学习，顺序也不是非常重要。

如何学习 WebGL

• 可以选择《WebGL编程指南》这本书，也可以选择本站提供的WebGL视频教程，作为入门学习资料
• 刚开始入门的时候，主要是理解GPU渲染管线的渲染流程，WebGl代码是如何执行的。
• 有一定基础后，可以选择一些图形学的书籍，深入学习图形学相关的算法。

如何学习 Three.js

• 可以选择《Three.js开发指南》书籍，不过书的的案例源码使用的是几年前的Three.js版本，注意使用新版本Three.js开发项目的时候，不要随意复制书中的源码，以免不必要的报错。
• 如果基础不是太好，选择Threejs视频教程也是一种好的方案，可以查看本站的Three.js视频教程。
• 学习Three.js，可以先学习一些基础知识，然后根据项目需要选择性的学习，有些用不到的可以暂时不深入学习。
• 如果一定的WebGl基础，可以尝试Three.js-master文件src目录下的源码，这样可以深入理解Three.js，Three.js是如何封装的WebGL API和着色器代码，同时也可以

前端工程师

如果你是前端工程师，突然接触到Web3D应用开发，对于你来说，前端的生态肯定是非常熟悉了，如果不了解WebGL和3D应用开发这一块，这种情况下，需要学习的自然是底层WebGL知识和Three.js基础知识，还有实战中不同Web3D应用项目，如何去开发，程序员和3D美术之间又应该如何配合，需要去学习实战项目的开发流程。

没有编程基础

如果你首次接触WebGL或Three.js，没有任何编程基础，只要学习能力强，学习是没有问题的，很多时候学习能力比你的基础更为重要，过去选择本站3000一对一课程的学员来看，有大约三分之一没有编程基础，不过相同点是学习能力比较强，基于实现自己领域的Web3D应用，对于这些初学者，简单指引下，基本上都很快都可以很快入门。

没有编程基础首先要做的是建立编程的感觉，WebGL开发使用的是JavaScript语言，自然需要找一些基础的JavaScript语言教程学习一下，然后简单补充下HTML和CSS知识，再去学习Three.js课程。

有编程基础-不了解前端

部分初学者，有编程基础，但是不了解前端，这种情况下你肯定首先需要补充的是HTML、CSS、JavaScript等前端知识，然后在学习Threejs和WebGL。刚开始学习Threejs和WebGL对前端要求不高，稍微有点基础即可，但是如果是为了开发项目，对前端的要求和普通前端一样，需要掌握JavaScript、HTML、CSS、http、vuejs、nodejs等知识。

OpenGL 基础

如果你有 OpenGL 基础，学习 WebGL 基本没有什么障碍，着色器语言、WebGL API和GPU渲染管线的原理你肯定是非常了解的，这种情况下，补充点前端知识即可。相比大多数初学者，你的基础更定是很深厚的，学习 WebGL，不过是换个生态环境罢了，需要打交道对象变成了浏览器。

unity3D 或 UE4

如果你使用过 unity3D 或 UE4，因为项目需要，需要切换为 Three.js，相比较大多数初学者，你是不缺少3D应用开发经验的，对3D应用开发流程比普通前端肯定是非常熟悉的，你学习的时候，自然不需要像普通前端一样，需要学习 3D 应用的开发流程，程序和美术是如何配合工作的，这种情况下，你需要学习的自然是先补充前端知识，然后熟悉Three.js细节即可，学习能力比较强的话，直接查看Three.js文档也可以。