我做了快三年前端，平时干活就是 Vue 加 Element Plus，页面里那些按钮、表格、弹窗，基本都在这套组件库里转。WebGL、Three.js、着色器这些词，我每次在技术文章里看到都下意识划走。倒不是不感兴趣，是总觉得那是另一拨人玩的东西，我连 GLSL 长什么样都没认真看过。
一个我一直没敢点开的角落
上周在设计群里有人甩了个链接，说有个叫 ThreeUI 的开源项目，是一个 3D UI 组件的目录，基于 Three.js 和 React 做的，里面有一百多个能直接拖着玩的交互组件。我点进去看了一眼，鼠标按住模型它就转，点一下按钮就有过渡动画，确实挺好看。但我合上页面的时候想的还是那句老话：这跟我有什么关系，我又不会写 shader。
后来晚上躺床上复盘，我有点被自己吓到。我发现这两年我的习惯已经变成了：遇到不熟的东西，打开对话框，描述需求，复制结果。真让我从零手写一段 3D 交互，我连第一行为什么这么写都没底。这种只会让 AI 递东西、自己不动手的空心感，上次重新学原生 HTML 的时候就有过，那次我还算找回了一点手感。这次面对的是更立体的东西，我反而更虚了。
ThreeUI 到底递给了我什么
我抱着试试看的心态，把仓库拉下来本地跑了一遍。它其实是 ThreeUI 主项目的社区开源版，作者把免费那部分整体放了出来，README 里写的是 50 个父组件、164 个能浏览的结果，每个都带实时渲染、控件和源码标签。我不用先搞懂整套渲染管线，就能直接看别人是怎么把一个 3D 元素摆上页面的。
它对外是 React 包，安装就是一行 npm install @designcodeio/threeui，然后像普通组件那样引入。文档里举的例子叫 AtTheHorizon，几行 JSX 就挂上去了。我日常写 Vue，第一次在 React 项目里 import 一个会转的 3D 组件，居然没我想象中那么吓人。Vite 和 TypeScript 都是我熟的，只是底下多了一层 Three.js 在跑。
clone 下来之后我照着 README 跑了 npm install 和 npm run dev，浏览器里真出来一个能拖能转的页面时，我愣了一会儿。不是因为它多复杂，是因为它跑起来的样子，跟我平时起一个 Vue 项目几乎一样：左边文件、右边预览、改一下热更新。原来所谓 3D，也不过是另一套我看懂目录结构就能上手的工程。社区版把 Pro 和 Beta 那些付费组件砍了，高级效果看不到，但对一个刚探头进来的人，免费这部分已经够我把 3D 界面从玄学变成原来就是组件加参数了。
我动手改了一个参数
光翻目录不过瘾，我挑了个组件想自己动动手。原以为躲不过 GLSL，结果发现很多视觉变化是直接用普通属性传进去的，改个颜色、换个相机角度，页面上的东西就跟着动。那一刻我居然有点开心，像是确认了一件事：3D 界面不是魔法，它也是人一行行写出来的，我可以慢慢读懂它。
我之前一直有个误区，觉得 WebGL 必须数学好、必须懂图形学才敢碰。ThreeUI 这种把组件封装好的目录，等于先给我一个能跑的脚手架，让我在能跑的基础上去问为什么，而不是对着一张白纸发呆。对新手来说，这比一上来啃教程要友好太多。
不过我也踩了个小坑。我顺手想把它塞进自己的 Vue 项目里直接用，结果才想起来这是 React 的包，render 方式就不一样，硬塞进去页面直接白了一块。最后我是单独起了一个 React 小demo 去试，反而轻松了。这事提醒我，跨框架这层隔阂我还真没认真理清过，平时被 AI 补代码补习惯了，哪天它没替我兜底，我就露怯。
它和我平时的 2D 页面有什么不一样
我平时做的页面是平的。一个卡片，一个列表，hover 上去变个色，最多加个阴影显得立体一点。ThreeUI 里的组件是真的不在平面里：你能转它、拉近、从侧面看，光打在不同面上颜色都不一样。我盯着那个 AtTheHorizon 看了好久，第一次觉得界面可以不是贴在屏幕上的，而是屏幕里有个东西。
这让我有点嫉妒，也有点兴奋。嫉妒是因为这些我一直没去学，兴奋是因为它证明前端这件事的边界比我以为的宽。我不是说每个人都要去写 3D，但知道自己还能往哪个方向长，对一个总怕被 AI 替代的人来说，挺踏实的。
又绕回那个老问题
写着写着还是没绕开 AI。我现在写前端，十次有八次是让 AI 先出方案。碰到 ThreeUI 这种新东西，我第一反应也是把文档丢给它，让它告诉我怎么用。它讲得确实比我自己查半天快。
可我还是慌。上次重新学原生 HTML 我就想过，如果连 3D 界面这种以前觉得高不可攀的东西，AI 也能几句话帮我拼出来，那我这个写页面的，价值到底在哪。不是唱衰自己，是真的很具体地慌：越往后，那些看起来厉害的东西越不稀奇，反而能把基础想明白的人越来越少了。
我也不确定该不该花时间啃 Three.js。万一到时候 AI 根据一句话就生成一整个 3D 页面了呢。可另一面我又怕，如果我一直只在表层让 AI 递东西，哪天它给的方案我不懂、出了奇怪的 bug，我只能干瞪眼。前阵子有个弹窗的样式怎么调都不对，AI 给的片段能跑但就是差那么点意思，我盯着那几十行代码看了半小时，才发现自己根本没真懂它在改什么。那种无力感我忘不了。
我现在打算这么办
我想把这个号当自己的成长记录。ThreeUI 我先不追求全懂，就把社区版那几十个组件挨个点一遍，挑两三个真用进自己的小项目里。能跑起来、能改参数、能在旁边写一句这里为什么这么写，对我来说就算往前挪了一步。下一篇我打算写写那个 AtTheHorizon 组件到底改了哪几个属性才变成我想要的样子，逼自己把过程讲清楚，省得又滑回让 AI 一笔带过的老习惯。
AI 我还是会用，但我想试着把顺序倒过来：先自己对着文档摸一遍，真卡住了再问它。这样至少我在学，不是在搬运。
说真的，我也挺想找几个同样写前端、但被 AI 卷得有点迷茫的朋友。你如果也写过越用 AI 越不敢手写代码那种心情，咱们评论区聊聊，互相壮个胆也好。
