🏠 AI Tools Hub | 首页 | 文章 | 评测 | GitHub热门 | 排行榜

ThreeUI 教程：Design+Code 开源 3D 交互组件库

📌 项目地址：github.com/MengTo/threeui | 星数：5,800+ | 协议：MIT | 技术栈：React + Three.js + TypeScript

📋 项目简介

刷过 m3e-canvas教程：浏览器里画草图直接变vibe coding提示词的读者会喜欢这个：那些「高级感拉满」的 3D 网页动效，现在有现成组件库了。ThreeUI 是 Design+Code 创始人 Meng To 的作品——做前端设计的几乎都看过他的 SwiftUI/Flutter 教程。这次他把 Three.js 3D 交互组件做成了可复制粘贴的 React 库：滚动进入时 3D 场景层层展开、文字在三维空间环绕、鼠标跟随视差，这些过去要找外包或啃 Three.js 文档才能做的效果，现在 npm install 一条命令直接用。

✨ 核心特性

项目	说明
50 个父组件	Community 版全部免费（MIT）
141 个免费变体	另含 23 个单例组件，共 164 个可浏览结果
完整应用外壳	与 Pro 版同源的布局/导航/搜索/主题/响应式行为
实时渲染器	组件页内置 live renderer + 变体选择器 + 源码标签
无登录	Community 版无认证、无账户状态、无结账运行时

🚀 安装

# React 项目中安装公共组件库
npm install @designcodeio/threeui

# 使用组件 + 共享样式
import { AtTheHorizon } from "@designcodeio/threeui";
import "@designcodeio/threeui/style.css";

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

# 想要最小导入图，用组件子路径
import { AtTheHorizon } from "@designcodeio/threeui/components/AtTheHorizon";

# 本地跑完整站点（浏览全部 111 条路由）
git clone https://github.com/MengTo/threeui.git
cd threeui && npm install && npm run dev

注意：渲染完整 HTML 文档的组件依赖根相对路径的 runtime 文件，把 node_modules/@designcodeio/threeui/lib-dist/assets/ 里需要的文件复制到应用 public 目录，或用组件的 sourceUrl/assetBaseUrl 属性覆盖。

⚙️ 使用建议

先用官方站 threeui.com 浏览效果，选中后直接复制源码标签里的代码
Pro 版源码刻意不发 npm，想要 Pro/Beta 组件需付费认证；Community 免费变体已覆盖主流 3D 效果
配合 scroll-craft教程：agent skill造高级滚动网站食用更佳：组件管效果，skill 管整站设计工作流

📚 常见问题

ThreeUI 是什么？

Design+Code 创始人 Meng To 开源的 Three.js 3D 交互组件库（GitHub 5.8k 星，MIT 协议），Community 版包含 50 个父组件、111 条路由、141 个免费变体记录加 23 个单例组件。它和收费的 Pro 版共用同一套应用外壳、布局、导航、搜索、主题与实时渲染器，只是目录里去掉了 Pro 和 Beta 组件。

ThreeUI 怎么安装使用？

npm install @designcodeio/threeui 一条命令安装，然后 import 组件和共享样式（import "@designcodeio/threeui/style.css"）即可在 React 项目中使用。想要最小开发导入图，可以用组件子路径 import { AtTheHorizon } from "@designcodeio/threeui/components/AtTheHorizon"。渲染完整 HTML 文档的组件需要把 node_modules 里的 runtime 资产复制到应用 public 目录，或用 sourceUrl/assetBaseUrl 属性覆盖路径。

ThreeUI Community 版和 Pro 版差在哪？

Community 版（GitHub 开源，MIT）包含全部 50 个父组件及其所有免费变体与控件；Pro 和 Beta 组件被移除，没有登录、账户状态、结账运行时。Pro 版源码刻意不发布到 npm，需付费成为 ThreeUI Pro 会员后在浏览器中认证获取。免费版足够做出 3D Hero、滚动视差等主流效果。