前言

各位掘友好，我是一拳，一个兴趣使然的英雄！啊不，前端开发工程师。

我相信很多前端开发者都曾有过开发一个炫酷的3D页面的想法，当下元宇宙概念盛行，各位同学炫技的DNA是不是都蠢蠢欲动了。

我们要做Web端的3D开发，Three.js毫不疑问是一个不错的选择，我在之前就打算学习一下Three.js，由于各种原因搁置了，最近因为项目需要，需要做3D图形相关的需求，以此为契机，打算深入的去学习一下这方面的知识。

因为Three.js文档很缺乏增加了各位同学的学习难度，因此我就在本篇本章中分享一下我搜集的学习资料和制定的学习计划。

学习资料

话不多说，下面就先分享一下我这边准备的学习资料

WebGL基础知识

学习网站：

• 郭隆邦的WebGL教程
• WebGL理论基础
• MDN-WebGL教程

学习书籍：

• 交互式计算机图形学 基于WEBGL的自顶向下方法 提取码: c29v
• WebGL编程指南.pdf 提取码: 72t2 书中代码 提取码: hafo

Three.js是基于WebGL的3D渲染引擎，它封装了大量WebGL较复杂的底层实现，为开发者提供了更加方便，更加容易理解的3D渲染API。

因此我们还是有必要对WebGL做一个初步的了解的，这有利于我们理解Three.js的实现原理；如果有同学打算后续对web3D图形化深入研究，就需要对WebGL和计算机图形学有更深入的学习。

个人认为学习的前期，在我们对WebGL有一个基础的了解之后，就可以上手使用Three.js进行一些案例开发了，这有利于维持我们的学习热情。毕竟WebGL的知识点很多，且并不是很简单，很难短时间就掌握的很好，因此如果抱着学好WebGL再去学习Three.js的想法，很容易在WebGL这学习阶段就打起了退堂鼓。

Three.js

学习网站

• 官网文档
• 官网文档中文版
• Three.js例子
• Three.js零基础入门教程(郭隆邦)

学习书籍：

• three.js开发指南 提取码: dcb1

学习计划

1. 先学习WebGL的基本知识，学完WebGL理论基础中的基本概念部分即可：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YJgCtoje-1661504744273)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbf518a30a434555ad9a33db23ad29ee~tplv-k3u1fbpfcp-watermark.image?)]
2. 从官网的教程学习Three.js中的一些概念场景，相机，光照，材质，网格等；
3. 通过官网教程熟系Three.js的基本流程 ，创建场景，创建相机，创建材质，创建形状，创建光照，光照和实体添加到场景中，创建渲染器，执行渲染和动画等等；
4. 看例子学习：Three.js的知识点很多，不要想着一口吞个胖子，在学习了Three.js基本概念和流程之后，我认为跟着官网中的例子去学习，是学习Three.js的最佳姿势。我们可以先读例子中的代码，然后跟着写代码，遇到不懂的api去官方api文档中去查询。
   通过对例子的编写和修改，以及在此过程中对api的查阅，可以逐步加深对Three.js的理解。

最后

以上就是自己梳理和总结的学习Three.js的方法，如果各位同学觉得适合你，还望能不吝点赞、收藏+关注，后续会持续更新我的学习过程和经验分享，如果感兴趣可以关注我。