# @designcodeio/threeui 中文文档

规范地址：https://npmcn.com/package/%40designcodeio/threeui/

版本：1\.2\.0
npm 元数据更新时间：2026-09-01T04:18:14.330Z
中文译文更新时间：2026-11-12T01:08:58.311Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40designcodeio/threeui
原文对照：https://npmcn.com/package/%40designcodeio/threeui/?lang=original
项目主页：https://threeui.com/
源码仓库：https://github.com/MengTo/threeui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：54.7 MB，726 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=18 \<20，react-dom \>=18 \<20，three \>=0\.149 \<1
- 首次发布：2026-08-21T16:39:28.465Z
- 最新版本发布：2026-09-01T04:18:13.997Z
- 近 30 天下载量：332435（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

开源React组件和来自TreeUI社区的互动模板.

## 安装

```sh
npm install @designcodeio/threeui
```

也可以使用：`pnpm add @designcodeio/threeui`、`yarn add @designcodeio/threeui`、`bun add @designcodeio/threeui`

## README

# 3UI社区

> **三UI赞助商:** 链接的README投放开始为500美元/月,网站投放开始为1500美元/月. [查看赞助计划](https://threeui.com/sponsorship)。 。 。 .

开源版"三一"无登录版. 它使用相同的应用程序 shell,布局,导航,浏览网格,搜索,主题,反应行为,组件页面,活化渲染器,控制器,变种取取器,和源标签作为主要项目.

该目录是唯一的产品级差异:Pro和Beta组件被去除. 每个社区都保留其所有自由变体和控制.

[浏览 三UI](https://threeui.com/) • 妇女 [在 GitHub 上查看源代码](https://github.com/MengTo/threeui)

![ThreeUI Community preview](https://npmcn.com/package/%40designcodeio/threeui/assets/preview.jpg)

## 三维发起人

赞助维护开源社区图书馆 将您的产品置于"三UI"开发者受众面前. 截至2026年8月26日,网站流量目前估计约为每天90,000次;这是定向流量的背景,而不是赞助者印象、点击或结果的保证.

| 计划 | 价格 | 安置和参与 |
| --- | --: | --- |
| 生态系统发起者 | 500美元/月 | 在公众的GitHub README上方附近连通了横幅,再加上这个赞助部分的感谢-你的信用. 最多6个赞助商. |
| 赞助人 | 1 500美元/月 | 生态系统中的一切,加上"三UI"网站文档侧边栏中一个小链接的横幅. 最多2个赞助商. |
| 最终赞助者 | 3 000美元/月 | 两种标语投放方式,每个协议一个经批准的固定范围集成项目,以及维护需要的优先考虑,赞助反馈,以及合理的特别请求. 所有作品都是由双方书面约定的. |

[见完整的赞助细节](https://threeui.com/sponsorship) 或电子邮件 [支持@ dedesigncode.io](mailto:support@designcode.io?subject=ThreeUI%20sponsorship)赞助不保证路线图的修改、编辑控制、排他性或私人支持.

## 包含

-   50 社区父母组成部分
-   111 社区路线
-   141个自由变种记录,加上23个单通元件(164个浏览结果)
-   共同体执行来源和所需资产
-   没有认证、 账户状态、 退出运行时间、 Pro 执行或 Beta 执行
-   `Get Pro` 链接到 `https://threeui.com/pricing`

## 本地运行

```bash
npm install
npm run dev
```

进行完整的出版边界、类型和制作-建造检查:

```bash
npm run build
```

## 安装反应包

从 npm 安装社区部分公共图书馆 :

```bash
npm install @designcodeio/threeui
```

导入组件和共享样式 :

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

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

对于最小的开发导入图,使用组件子路径:

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

提供完整的 HTML 文档的组件期望它们的运行时间文件在三UI预览所使用的同根相通的 URL 上. 复制所需文件 `node_modules/@designcodeio/threeui/lib-dist/assets/` 输入您的应用程序的公共目录, 或覆盖组件的 `sourceUrl` 或者说 `assetBaseUrl` 现有道具.

## Pro 源码访问

Pro 执行来源故意不发布到 npm. 活动三UI Pro成员通过浏览器认证并下载一个与公共CLI的有名源捆:

```bash
npx @designcodeio/threeui-cli add cross-beam
```

CLI 使用 OAuth 与 PKCE 连接, 将其可刷新的会话保存在只拥有者的权限中, 检查每个服务器请求的账户权限, 并拒绝覆盖更改的项目文件, 除非 `--force` 提供。 运行 `npx @designcodeio/threeui-cli --help` 用于登录、登录、目的地和发展终点选项.

## 同步

登录存储器独立运行 。 维护者可以从单独保存的主要项目快照刷新其社区子集:

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

同步失败关闭, 在生成公共导入图前过滤 Pro 和 Beta, 保存所有自由元数据和选项, 删除限制的字体资产, 并写道 :

-   `public/community-sync-report.json` ——计数加每个构成部分的变式/控制等同
-   `public/source-code.json` – 代码标签所用的社区源包
-   `src/data/shaders.tsx` ——全社区目录和渲染器进口

私人三UI寄存器在每次成功推后运行此同步 `main`。一个不同步退出而不发布。 更改更新 `automation/community-sync` 分支和打开一个经过审查的拉拉请求。 新的公共组件,变体,或控件推断出小放出;清除推断出大放出;相容源变化推断出补丁放出. 合并一个版本同步拉动请求,通过 npm 信任的发布来源来发布新软件包 .

公共工作流程还运行了干净的构建,边界审核,软件包创建,以及发布前的匿名安装烟雾测试. Pro安装器单独版本并发布;对Pro组件内容的修改不需要CLI发布.

## 许可证

应用程序代码,社区组件代码,以及由"三UI"授权的社区图像都获得麻省理工学院许可. 捆绑开口字体仍保留在SIL Open Font License 1.1下,捆绑出3.js运行时文件仍保留了MIT许可. 远程目录缩略图和预览 `https://threeui.com` 不被此寄存器重新分配 。 见 `ASSET-LICENSES.md`, (中文(简体) ), `FONT-LICENSES.md`,以及 `THIRD_PARTY_NOTICES.md`。 。 。 .

## 常见问题

### @designcodeio/threeui 是什么？

开源React组件和来自TreeUI社区的互动模板\.

### 如何安装 @designcodeio/threeui？

在项目目录运行 npm install @designcodeio/threeui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18 \<20）、react-dom（\>=18 \<20）、three（\>=0\.149 \<1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @designcodeio/threeui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @designcodeio/threeui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @designcodeio/threeui 可以商用吗？

@designcodeio/threeui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @designcodeio/threeui 的下载量有多少？

根据 npm 官方下载统计，@designcodeio/threeui 在 2026/10/12 – 2026/11/10 这 30 天内被下载 332,435 次，日均约 11,081 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @designcodeio/threeui 还在维护吗？

最新版本 1\.2\.0 发布于 2026/09/01（2 个月前）；至今共发布 4 个版本，其中过去 12 个月发布了 4 个；首次发布于 2026/08/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。