three.js+WebGL踩坑经验合集：写在前面的话

笔者从2023年初开始参与一个基于three.js引擎的web项目的开发工作。本打算2024年春节就把期间踩过的坑写到博客上分享给大家，然而哪怕本专栏的各种构思和内容已经在笔者的脑海里翻滚了一年，得了严重拖延症患者的我还是一直拖到了现在，实在惭愧。

好久没写博客，发现这里的专栏竟然还需要写简介。笔者的语言表达能力相当捉鸡，差点就写不下去要打退堂鼓了。所幸的是我还是勉强写了一小段凑合一下。反正那儿写得不好无所谓，能把解决问题的心得说明白，让大家少走点弯路，那笔者就已经心满意足了。

不得不说，three.js是一款非常优秀的web3D渲染引擎。我们可以用它快速创建各种在网页上展示3D场景并配以一些交互效果的项目。我所在公司的项目也选择了它。

然而在使用的过程中，笔者发现它的封装性并没有想象中的强（相比于Unity/Ue这些有配套编辑器的3D引擎）。里面的一些api需要你对WebGL原生开发有一定了解的前提下才能正确使用。如果您要修复里面的bug，或者进行二次开发的话，就更加会发现，它的架构很难做到“对修改封闭，对扩展开放”的原则，你想扩展一些功能，很多时候还得往它的内核代码里面添加一些逻辑。

我们项目有些东西玩得很花，比如大尺寸透明物体的大量使用，标尺，描边等线条高频出现在项目的3D场景中，用正交相机模拟2D平面等等，这些“骚操作”都很容易触碰到目前Web3D项目的软肋。所以很容易被玩出来各种离奇古怪的bug，还有好些功能需要笔者对引擎进行二次开发。

废话不多说了，本专栏今天正式启动，希望能坚持下去把它给写完。

注意：本专栏不是个系统化学习的课程，而是各种零碎的经验心得的集合，所以，标题后面带(1)和带(2)通常是相对独立的内容，如果一篇文章太长，我会将其分解为(3.1)，(3.2)这样的后缀，这样的两篇博文就是前后关联或者是从同一篇文章拆分出来的

想要系统学习three.js以及WebGL的朋友，可以自行到three.js中文网/WebGL中文网进行学习。