前言
各位掘友好，我是一拳，一个兴趣使然的英雄！啊不，前端开发工程师。
我相信很多前端开发者都曾有过开发一个炫酷的3D页面的想法，当下元宇宙概念盛行，各位同学炫技的DNA是不是都蠢蠢欲动了。
我们要做Web端的3D开发，
Three.js
毫不疑问是一个不错的选择，我在之前就打算学习一下
Three.js
，由于各种原因搁置了，最近因为项目需要，需要做3D图形相关的需求，以此为契机，打算深入的去学习一下这方面的知识。
因为
Three.js
文档很缺乏增加了各位同学的学习难度，因此我就在本篇本章中分享一下我搜集的学习资料和制定的学习计划。
学习资料
话不多说，下面就先分享一下我这边准备的学习资料
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开发指南
提取码: dcb1
学习计划
-
先学习
WebGL
的基本知识，学完
WebGL理论基础
中的基本概念部分即可：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YJgCtoje-1661504744273)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbf518a30a434555ad9a33db23ad29ee~tplv-k3u1fbpfcp-watermark.image?)] -
从官网的教程学习
Three.js
中的一些概念场景，相机，光照，材质，网格等； -
通过官网教程熟系
Three.js
的基本流程 ，创建场景，创建相机，创建材质，创建形状，创建光照，光照和实体添加到场景中，创建渲染器，执行渲染和动画等等； -
看例子学习：
Three.js
的知识点很多，不要想着一口吞个胖子，在学习了
Three.js
基本概念和流程之后，我认为跟着官网中的例子去学习，是学习
Three.js
的最佳姿势。我们可以先读例子中的代码，然后跟着写代码，遇到不懂的api去
官方api文档
中去查询。
通过对例子的编写和修改，以及在此过程中对api的查阅，可以逐步加深对
Three.js
的理解。
最后
以上就是自己梳理和总结的学习
Three.js
的方法，如果各位同学觉得适合你，还望能不吝点赞、收藏+关注，后续会持续更新我的学习过程和经验分享，如果感兴趣可以关注我。