以前想做个带 3D 粒子背景的官网什么行情？找外包报价大几千起步，自己啃 Three.js 文档少说两周起。2026 年 8 月底，3D UI 组件库 ThreeUI 开源了——短短五周 6300+ Star，MIT 协议随便商用。今天把这套东西拆开讲讲，正在建站的朋友可以直接抄作业。
一、它到底是什么
一句话：React + Three.js 的 3D 效果组件库，技术栈是 React + TypeScript + Three.js + Vite。
它的定位很精准：不教你图形学，不让你写 Shader，把"看起来很贵"的 3D 官网效果做成标准组件。只要会 React，就能用。
Community 版目前有 164 个可浏览效果，分 10 大类：Landing Pages、Hero、Three.js、Motion Design、Sections、Backgrounds、Buttons、Text Animation、UI Elements、CSS。官方统计是 50 个父组件、111 个路由、141 个免费变体——体量够你挑花眼。
最爽的是上手方式：打开 threeui.com/browse，所有效果在线预览，旁边直接给源码，不用注册。不想看文档？直接看效果顺眼就抄。
二、两种用法：三分钟跑起来
第一种：npm 安装，最常用
npm install @designcodeio/threeui
import { AtTheHorizon } from "@designcodeio/threeui";
import "@designcodeio/threeui/style.css";
export function Hero() {
return <AtTheHorizon />;
}
三行代码，一个 3D Hero 区块就进页面了。还支持子路径按需导入，打包体积可控——这点对 3D 库很重要，不然 bundle 分分钟爆炸。
第二种：本地克隆，适合魔改
git clone https://github.com/MengTo/threeui.git
cd threeui
npm install
npm run dev
想深度定制的建议走这条路，源码全开放，没有黑盒封装。
三、效果点名：这几个值得先看
164 个效果不可能全试，我按"建站实用度"挑几个：
Kage：日式寺庙整页——夜景、灯笼、樱花，带鼠标/键盘/滚动交互。原本是作品集级的炫技项目，现在被拆成单个组件。如果你做的是作品集、个人品牌站，直接拿它当 Hero，气场拉满。
动态背景三件套（Liquid Form / Particle Network / Nebula Background）——流体、粒子、星云背景，AI 产品官网最爱用的那一挂。SaaS、工具类产品首页铺一个，质感立刻贵三倍。
Liquid Metal Button——Shader 级金属质感按钮，光效渐变粒子全上。传统 CSS hover 在它面前像上个世纪的东西。适合用在核心 CTA 按钮上，一个就够，多了腻。
文字动画（Typography Vortex / Particle Wordmark）——标题粒子化、字形变形、路径运动。以前要 GSAP + Canvas + Shader 手搓，现在调个组件就行。
选型建议：背景铺氛围、按钮做点睛、文字动画只用在主标题。3D 是调料不是主菜。
四、真正的杀招：AI 友好工作流
ThreeUI 最让我心动的部分不是组件数量，是它对 AI 编程工作流的适配。
源码完全开放意味着：你可以直接把组件源码丢给 Cursor、Claude Code、Codex，然后说人话——"整体改成深蓝色科技风""粒子数量减一半""按钮再亮一点"。AI 看得懂源码，改起来精准。
Pro 版更进一步，官方做了 MCP 服务：AI Agent 可以直接搜索组件、读取源码、获取实现 Prompt。未来的形态是：你跟 AI 说一句"我要个深色科技风的 3D 背景"，选型、集成、调参一条龙。
这对独立开发者意味着什么？以前 3D 效果的瓶颈是"你不会写 Shader"，现在瓶颈变成"你会不会描述需求"。门槛从"技术能力"变成了"审美和表达能力"——而这正是设计师的主场。
五、冷静一下：3D 不是越多越好
泼三盆冷水，都是血泪换来的：
- 性能是硬伤：粒子铺满首屏，低端手机直接发烫、掉帧。ThreeUI 和之前的 Canvas UI 一起，把前端组件库从"布局表单"推向了"WebGL 3D"时代，但"能跑"和"跑得爽"是两回事。上线前一定用低端机实测。
- 加载体积：Three.js 本体就不轻，164 个效果你不可能全要。按需导入是必须的，首屏只放一个 3D 效果，其他用静态兜底。
- 氛围感要克制：3D 背景 + 3D 按钮 + 粒子标题全上，页面就变成夜店灯球了。记住上面的选型建议：一个页面最多一个视觉焦点。
结尾：给正在建站的你
如果你正在做个人站、产品官网，ThreeUI 这套东西的正确打开姿势是：
- 去 threeui.com/browse 花半小时逛一圈，收藏 3-5 个顺眼的
- 本地 clone 下来跑一遍，看源码理解参数
- 先只集成一个效果（建议从背景或 Hero 开始）
- 把源码丢给 AI，按你的品牌色和文案定制
- 低端机实测通过再上线
"看起来很贵"的 3D 官网，成本正在快速塌方。以前是外包公司收你几万块的活，现在是一个 npm 包 + 一个下午的事。工具平权之后，比的就是审美和执行力了。
- 官网：https://threeui.com
- GitHub：https://github.com/MengTo/threeui（MIT 协议，可商用）
- 在线浏览全部效果：https://threeui.com/browse
建站时想加 3D 效果，可以先去 threeui.com/browse 逛一圈找灵感。