携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
接下来的文章，会比较水。
动机
人如果无端的去做一件事，那么也很容易无端的放弃那件事。
我更文的动机就是奖品，读three的动机是为了工作。
当前项目是基于three/editor改造的，然而发生一些意料之外的情形，只看项目代码不足以解决问题。
明确目的缩减范围
three的东西还是比较多的。 粗分一下，就是数学库 封装的绘图相关库。我要专注的部分，有两个，一个是物理材质，另一个就是editor。
借图温习一下three的架构，其实不知道太大也没关系，知道了就能便宜行事。
graph TD
Three --> webGLRenderer
webGLRenderer--> camera
webGLRenderer--> scene
scene--> mesh
scene--> Object3D
Object3D --> mesh1
scene--> Group
Group --> mesh2
Group --> Object3D2
Object3D2 --> mesh3
scene--> light
mesh --> geomerty
mesh--> material
material --> texture
准备
既然要度源码自然得先准备一份源码。 three仓库历史悠久，体积巨大，直接从原仓库下载十分缓慢。 于是，我还是从gitee镜像上下载，这样最多差了一天的更新。
准备一个翻译词典， 很多时候读源码，其实就是结合上下文去猜， 如果提交代码的人变量名真正做到了语义化，那自然是非常好，所以词典对我来说必备。
再说，一些必备的东西，一些物理和数学知识。
物理，知道人眼看见的景象是怎么来的就差不多了，光学知识。
人眼能到东西，是因为有光进入人眼了， 人的视线范围就是，能有光进入人眼的区域。这个进入人眼的光线必然是某个物体发出的，可能有人要杠一下，大多数物体不会发光，都是反射光。 没错，的确是这样。 但是在人眼看来，这些都是出射光，也就是我们在three里面最终计算出来，赋予fragColor的值。 光的反射，折射，就不会展开了。
数学知识，简单的加减乘除。只不过多了向量和矩阵。也不赘述了。
本地运行
从gitee仓库下载， 打开根目录，用你的包管理器安装依赖，我用的是pnpm,因为界面看起来爽利一些，别无其它。 pnpm i 安装完成之后 pnpm start 你会看到如下界面，因为three网站是一传统个多页面项目，所以看到如下的东西。
点击 editor doc examples 任意一个文件夹就能看到和three官网一样的效果。本地启动官网的好处，我想大家应该知道，代价就是cpu内存。
本次水文结束。待续~~~~
