ThreeUI Community：50 个开源 3D 组件库，无需登录即可使用

Fen9Pi2026/8/23大约 9 分钟

前言：3D 组件库的开源版本

2026-08-23 23:14 GMT+8

ThreeUI 是什么？

一个强大的 3D UI 组件库，提供高质量的 3D 组件和实时渲染能力。

问题：

Pro 版本需要付费
Beta 版本需要登录
很多开发者只想用免费的组件

解决方案：

ThreeUI Community——开源、无需登录的 ThreeUI 版本

一句话说清楚：

使用相同的应用架构和 UI，提供 50 个免费 3D 组件，111 个路由，141 个变体，完全开源，无需登录即可使用

一、项目概览

ThreeUI Community 是 ThreeUI 的开源、无需登录版本。

一句话说清楚：

使用相同的应用外壳、布局、导航、浏览网格、搜索、主题、响应式行为、组件页面、实时渲染器、控件、变体选择器和源代码标签，提供 50 个免费 3D 组件，完全开源，无需登录

项目地址：https://github.com/MengTo/threeui 官网：https://threeui.com 开源协议：MIT NPM 包：@designcodeio/threeui

核心特性：

✅ 50 个 Community 父组件
✅ 111 个 Community 路由
✅ 141 个免费变体 + 23 个单例组件（164 个浏览结果）
✅ 完整的 Community 实现源代码和资产
✅ 无需身份验证、账户状态、结账运行时
✅ 完全开源，MIT 协议

二、核心架构

应用架构

流程图1

核心系统

1. 应用外壳（Application Shell）

整体应用框架
路由管理
状态管理

2. 布局系统（Layout）

响应式布局
网格系统
自适应设计

3. 导航（Navigation）

侧边栏导航
面包屑
快速跳转

4. 浏览网格（Browse Grid）

组件网格展示
过滤和排序
预览模式

5. 搜索（Search）

全文搜索
组件搜索
快速定位

6. 主题系统（Themes）

深色/浅色主题
自定义主题
主题切换

7. 响应式行为（Responsive）

移动端适配
平板适配
桌面端适配

8. 组件页面（Component Pages）

组件详情
实时预览
代码查看

9. 实时渲染器（Live Renderers）

Three.js 集成
实时 3D 渲染
交互式预览

10. 控件（Controls）

参数调整
变体切换
实时反馈

11. 变体选择器（Variant Picker）

变体浏览
变体对比
变体切换

12. 源代码标签（Source Tabs）

代码查看
代码复制
代码导出

三、组件库内容

组件统计

Community 组件：

50 个父组件
111 个路由
141 个免费变体
23 个单例组件
总计 164 个浏览结果

组件分类

流程图2

组件特性

每个 Community 组件包含：

✅ 完整的实现源代码
✅ 所需的资产（字体、纹理等）
✅ 所有免费变体
✅ 所有控件
✅ 实时预览
✅ 代码查看

移除的内容：

❌ Pro 组件
❌ Beta 组件
❌ 身份验证
❌ 账户状态
❌ 结账运行时

四、工作流程

本地开发流程

流程图3

安装到项目流程

流程图4

同步工作流程

流程图5

五、快速开始

本地运行

1. 克隆仓库

git clone https://github.com/MengTo/threeui.git
cd threeui

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

4. 访问应用

打开浏览器访问 http://localhost:3000

运行构建检查

npm run build

这会运行完整的发布边界、类型和生产构建检查。

安装到项目

1. 安装 React 包

npm install @designcodeio/threeui

2. 导入组件和样式

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

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

3. 使用子路径导入（最小化导入图）

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

4. 复制资产文件（可选）

对于渲染完整 HTML 文档的组件，需要将运行时文件放在相同的根相对 URL：

# 从 node_modules 复制到 public 目录
cp -r node_modules/@designcodeio/threeui/lib-dist/assets/ public/

或覆盖组件的 sourceUrl 或 assetBaseUrl 属性。

六、Pro 版本访问

Pro 源代码访问

Pro 实现源代码故意不发布到 npm。

访问方式：

活跃的 ThreeUI Pro 成员通过浏览器身份验证
使用公共 CLI 下载有权访问的源代码包

CLI 使用

安装 Pro 组件

npx @designcodeio/threeui-cli add cross-beam

CLI 特性：

使用 OAuth with PKCE
存储可刷新的会话（仅所有者权限）
每次服务器请求检查账户权限
除非提供 --force，否则拒绝覆盖已更改的项目文件

CLI 选项

# 登录
npx @designcodeio/threeui-cli login

# 登出
npx @designcodeio/threeui-cli logout

# 查看帮助
npx @designcodeio/threeui-cli --help

# 查看选项
npx @designcodeio/threeui-cli --help

七、同步机制

同步工作流

从主项目同步到 Community

npm run sync:community -- /path/to/main-threeui

同步过程：

过滤 Pro 和 Beta 组件
生成公共导入图
保留所有免费元数据和选项
移除受限字体资产
写入同步文件

生成的文件：

public/community-sync-report.json — 计数加上每个组件的变体/控件奇偶性
public/source-code.json — 代码标签使用的 Community 源代码包
src/data/shaders.tsx — 仅 Community 目录和渲染器导入

自动化同步

私有 ThreeUI 仓库：

每次成功推送到 main 后运行此同步
无操作同步退出而不发布
更新 automation/community-sync 分支并打开一个审查的 PR

版本推断：

新的公共组件、变体或控件 → 次要版本
移除 → 主要版本
兼容的源代码更改 → 补丁版本

发布流程：

合并版本化的同步 PR
通过 npm 可信发布（带 provenance）发布新包

公共工作流：

运行干净构建
边界审计
包创建
匿名安装冒烟测试
然后发布

Pro 安装程序：

单独版本化和发布
Pro 组件内容更改不需要 CLI 发布

八、核心价值

1. 开源免费

完全开源：

MIT 协议
无需付费
无需登录
商业使用友好

2. 丰富的组件库

50 个组件：

3D 场景
动画效果
交互组件
视觉效果
UI 组件

141 个变体：

每个组件多个变体
丰富的选择
灵活的配置

3. 完整的应用架构

与 Pro 版本相同：

应用外壳
布局系统
导航
浏览网格
搜索
主题系统
响应式行为
组件页面
实时渲染器
控件
变体选择器
源代码标签

4. 实时预览

Live Renderers：

Three.js 集成
实时 3D 渲染
交互式预览
控件调整

5. 源代码访问

完整源代码：

每个组件的完整实现
所需的资产
可以查看和复制
可以学习和修改

6. 易于集成

NPM 包：

npm install @designcodeio/threeui

简单导入：

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

九、实际应用场景

场景 1：快速原型

需求：快速创建一个 3D 效果的网站原型

使用 ThreeUI Community：

浏览组件库
选择合适的组件
复制代码
集成到项目
快速完成原型

价值：

快速原型
丰富的 3D 效果
易于集成

场景 2：学习 3D 开发

需求：学习 Three.js 和 3D UI 开发

使用 ThreeUI Community：

浏览组件
查看源代码
学习实现方式
实验和修改

价值：

完整源代码
学习资源
实时预览

场景 3：商业项目

需求：为商业项目添加 3D 效果

使用 ThreeUI Community：

选择合适的组件
集成到项目
自定义样式
商业使用

价值：

MIT 协议
商业使用友好
高质量组件

场景 4：组件库扩展

需求：基于 ThreeUI Community 扩展自己的组件库

使用 ThreeUI Community：

Fork 项目
添加自定义组件
扩展功能
内部使用

价值：

完整架构
易于扩展
开源友好

十、许可证

MIT 协议

MIT 许可证覆盖：

✅ 应用代码
✅ Community 组件代码
✅ ThreeUI 编写的 Community 图像

其他许可证

SIL Open Font License 1.1：

✅ 捆绑的开源字体

MIT 协议：

✅ 捆绑的 Three.js 运行时文件

不重新分发：

❌ 从 https://threeui.com 加载的远程目录缩略图和预览

详细许可证：

见 ASSET-LICENSES.md
见 FONT-LICENSES.md
见 THIRD_PARTY_NOTICES.md

十一、总结

核心问题

3D 组件库的痛点：

Pro 版本需要付费
Beta 版本需要登录
很多开发者只想用免费的组件
缺乏高质量的开源 3D 组件库

ThreeUI Community 的解决方案

1. 开源免费

MIT 协议
无需付费
无需登录
商业使用友好

2. 丰富的组件库

50 个父组件
111 个路由
141 个变体
23 个单例组件

3. 完整的应用架构

与 Pro 版本相同的应用架构
完整的 UI 系统
实时渲染器
控件和变体选择器

4. 实时预览

Three.js 集成
实时 3D 渲染
交互式预览
控件调整

5. 源代码访问

完整的实现源代码
所需的资产
可以查看和复制
可以学习和修改

6. 易于集成

NPM 包
简单导入
子路径导入
资产文件复制

7. 自动化同步

从主项目同步
过滤 Pro 和 Beta
保留免费内容
自动发布

为什么选择 ThreeUI Community？

1. 开源免费

MIT 协议
无需登录
商业使用友好

2. 丰富的组件库

50 个组件
141 个变体
多种分类

3. 完整的应用架构

与 Pro 版本相同
完整的 UI 系统
实时渲染器

4. 实时预览

Three.js 集成
交互式预览
控件调整

5. 源代码访问

完整源代码
学习资源
易于修改

6. 易于集成

NPM 包
简单导入
快速集成

记住

ThreeUI Community 是 ThreeUI 的开源、无需登录版本。
使用相同的应用架构和 UI，提供 50 个免费 3D 组件，111 个路由，141 个变体，完全开源，无需登录即可使用。
开源免费，丰富组件，实时预览，易于集成。

附：资源链接

项目资源：

GitHub：https://github.com/MengTo/threeui
官网：https://threeui.com
NPM：@designcodeio/threeui
License：MIT

快速开始：

# 本地运行
git clone https://github.com/MengTo/threeui.git
cd threeui
npm install
npm run dev

# 安装到项目
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";

Pro 访问：

# 安装 Pro 组件
npx @designcodeio/threeui-cli add cross-beam

# 登录
npx @designcodeio/threeui-cli login

# 登出
npx @designcodeio/threeui-cli logout

同步：

# 从主项目同步
npm run sync:community -- /path/to/main-threeui