ThreeUI 开放了：160+ 免费 3D 组件，复制提示词就能让 Agent 改出炫酷页面

Design+Code 的 Meng To 开源 ThreeUI 社区版：免登录、MIT、160+ 程序化 three.js 组件/hero 段/图标/动效全部免费，可在线互动、看源码、复制提示词丢给 Agent 改主题光影。装个 npm 包就能当 React 组件用，落地页/产品页想要 3D 质感不用从零写 WebGL。

这是什么

ThreeUI（MengTo/threeui）是知名设计教育作者 Meng To（Design+Code 创始人）开源的 three.js 组件与落地页库。这次公布的是它的 Community 社区版——免登录、开源、MIT 协议，和主站 threeui.com 共用同一套应用外壳、布局、导航、主题、响应式与组件页，只是把 Pro/Beta 组件移除、把续费入口指向官网订阅。

里面的组件不是图，而是程序化生成的 3D 场景：hero 首屏段、图标、动效、可交互部件，每个都带多个变体（variants）和可调参数。你可以在网页上直接在线互动（拖动、旋转、看光影），也能打开 Code 源码标签复制源码或提示词，再把这整段提示词丢给 Agent，让它换主题、调光影、改动效、重排布局。这就是它跟一堆「只放效果图」的组件库最不一样的地方。

数一数：免费到底有多少

来自官方 README 的 Community 版清单（主站三方的免费数据口）：

• 50 个 Community 父组件
• 111 条 Community 路由
• 141 条免费变体记录 + 23 个单例组件 = 164 个可浏览结果
• 完整 Community 实现源码 + 所需资源
• 无登录、无账户状态、无结账逻辑、无 Pro/Beta 实现

对外宣传口径是 「160+ 免费 3D hero 段」，和上面的数字对得上。

怎么用（React 组件）

装包即用：

npm install @designcodeio/threeui

import { AtTheHorizon } from "@designcodeio/threeui";
import "@designcodeio/threeui/style.css";

export function Hero() {
  return <AtTheHorizon />;
}

想要最小的 import 树，直接用组件子路径：

import { AtTheHorizon } from "@designcodeio/threeui/components/AtTheHorizon";

本地跑完整目录：npm install && npm run dev（目录本身就是一个可运行的 app，带浏览网格、搜索、主题、变体选择器与源码标签）。

适合谁

• 想快速给产品 / 落地页加 3D 质感，又不想从零写 WebGL 的开发者、设计师；
• 用 Agent 干活的人：把 ThreeUI 的提示词/源码喂给 Claude Code、Cursor 等，让 Agent 按你的品牌去改主题、光影、动效；
• 喜欢「开箱即用 + 能在线互动 + 能看源码」组件库的人。

两点注意：

1. 免费的是 Community 版；Pro 版（多 50+ 组件 + MCP + skills）需订阅，仓库刻意不发布 Pro 源码到 npm。要拿 Pro 源码得用 npx @designcodeio/threeui-cli add 登录授权；
2. 远程缩略图/预览图从 threeui.com 加载，本仓库不重新分发；字体走 SIL OFL、three.js 运行时走 MIT，应用与 Community 源码主体是 MIT。