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中文网进行学习。