为什么 AI 编程评测,总爱考「用 three.js 做个 3D 网页」?

我让 AI 把 149 条视频堆进 3D 看板，它翻出一条被我埋没的视频

01｜先看它做出来的东西

最近刷模型评测，我注意到一个现象：不少考题都让 AI「用 three.js 做个 3D 网页」。一个网页 3D 库，凭什么当编程能力的考题？

空口讨论没意思，我手头正好有个真实任务。每周复盘，我要在一百多条视频里找异常，现有的 2D 仪表盘翻起来费劲。我把这活交给 AI，让它用 three.js 从零做一个 3D 看板。

这篇文章给你两个东西：一张「什么时候该上 3D」的判断清单，和一道能掂量 AI 编程水平的考题。结论先说：3D 场景是编程能力的全套现场，渲染质量直接暴露模型水平。证据全部来自这次真实实验，数据是我自己的抖音作品。

看板长这样。149 条作品，每条一根柱子：横轴是播放量，纵深是 2 秒跳出率，柱子越高涨粉越多，颜色从暗红到荧光黄编码 5 秒完播率。

可以拖着转，滚轮缩放，点击柱子出详情卡。用起来第一件事，它就帮我翻出一条被我埋没的视频：《Claude Code 创始人今年没写一行代码》，847 播放，5 秒完播却有 43.2%。这种数据组合，在 2D 表格里你刷三遍也注意不到。

02｜three.js 是什么：让浏览器直接画 3D

大白话讲，three.js 是一个网页 3D 工具箱。早年网页要显示 3D，得装插件；后来浏览器自带了一块叫 WebGL 的 3D 绘图能力，three.js 把它包装成好用的接口，写少量代码就能在网页里立起一个能转、能点的三维场景。

它能做的事，你在网上多半见过：网页游戏、产品展示、数据可视化、数字展厅。项目在 GitHub 上开源，搜 three.js 就能找到；想上手也简单，npm 装 three，或者把官方示例改几个数，刷新页面就能看到自己的 3D 场景。

看完最终版的效果，你就明白它为什么值得聊了：

03｜凭什么它有资格当考题

一个 3D 场景，是编程能力的全套现场。要在浏览器里立起一个像样的三维页面，坐标、相机、光照、几何、动画、代码组织，一样都不能少。坐标错了，柱子插进地里；相机没调好，用户不知道往哪看；光照不对，整个场景是平的；动不起来，那就是张静态截图。

而且它没法靠背题混过去。todo 列表、计数器这类题，模型见过海量模板，写出来都差不多；3D 场景成不成，一眼就能看出来。东西立不立得住，转起来像不像真的，装不了。

所以不少评测拿它观察模型水平：同一道题，越强的模型，渲染出来的场景越逼真、交互越流畅；弱一点的模型，经常柱子穿模、标签乱飞、点了没反应。渲染效果就是模型能力的刻度。这是我的判断，依据是评测里的常见现象加这次实验，你拿自己手头的 AI 考一道就能验证。

04｜真交活给 AI：两次返工才真能用

先交代数据。从飞轮拉回 153 行作品记录，同一作品改过标题会有多条快照，按日期加标题归并、取最新，剩 151 条；其中跳出率数据完整的 149 条入板。口径和我的复盘完全一致。

第一版双击打不开。AI 把看板写成了网页文件，我双击，以 file:// 方式打开，浏览器直接把 three.js 模块拦了，页面全白，报错原文是「Cross origin requests are only supported for protocol schemes: http, https」，跨源请求只支持 http 和 https。代码本身没写错，拦它的是浏览器的安全机制：ES 模块不允许在文件协议下加载。

修法不复杂，核心就一条：别双击，挂到 http 服务上。我把看板挂进飞轮后端的 /boards 静态路由，以后复盘顺手就能打开；你在本地试，用 python3 -m http.server 起一个服务也行。

第二版，象限文字标签被柱子挡住了。四个象限的名字立在柱群内部，高播放区的柱子直接穿过去，「高播放·高跳」只剩半个字。挪了一次，放到象限内侧四角，还是被挡；再挪，挪到网格边界外侧没柱子的地方，才稳。

后面又补了复盘真要用的交互：鼠标悬停显示标题和播放，点击柱子在右下角出详情卡，右上角四个按钮，一键飞到「被埋没」「标题党」「爆款」。

成果落到数字上：149 条里，真爆款 28 条，标题党嫌疑 28 条，被埋没 25 条。除了开头那条 847 播放的，还有一条 1.1 万播放的《给 AI 装个设计总监品味》，2 秒跳出高达 49%，人点进来就走。播放量会骗人，完播率不太会。

数据来源：飞轮 douyin-works 接口，2026-09 快照；分类按播放和跳出的中位线划分，阈值变了数量会跟着变。

05｜什么时候别用 3D

3D 值不值得做，就看一条：它能不能给你 2D 给不了的角度。这次找异常，3D 是真有增量，一百多根柱子的位置关系，2D 表格看不出「低播放高完播」聚在哪一团。但普通表格、文章页、表单，硬上 3D 只会更卡更难用；数据量再往上涨，浏览器的渲染会先顶不住。

给你留一张判断清单：

1. 1. 数据有三类以上要对照着看的位置关系，2D 图会互相遮挡：适合。
2. 2. 要展示一个空间物体，比如产品、房间、地形：适合。
3. 3. 只是展示数字和文字，没有空间结构：别上，2D 更快更清楚。
4. 4. 读者多用手机、不熟 3D 视角操作：慎上，先给 2D 兜底。

下次你想掂量手头 AI 的编程斤两，别再让它写 todo 页面了，把这道题发给它：用 three.js 做一个能转、能点、能接真实数据的 3D 看板。跑不跑得起来，像不像回事，数据敢不敢接真的，三眼就能看出水平。

你刷到过哪些让你眼前一亮的 AI 3D 演示？评论区聊聊，我挑几个拆拆它们强在哪。

关于作者

我是老罗，一个持续学习和实践新技术的程序员。我会把学到的知识、做过的项目和踩过的坑，整理成普通人能看懂、真正能用起来的内容。

不止聊 AI，更想和你一起把 AI 用起来。