# three-ui-vue

**Repository Path**: starcode000/three-ui-vue

## Basic Information

- **Project Name**: three-ui-vue
- **Description**: threeui的Vue版实现。
原仓库https://github.com/MengTo/threeui
原仓库官网：https://threeui.com/
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-03
- **Last Updated**: 2026-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @starcode000/threeui-vue

[English](README.md) | 简体中文

面向 Vue 3 的交互式 Three.js 组件、模板与着色器集合 —— 100+ 个可直接上线的特效，附带 TypeScript 类型、按组件构建产物和完整的文档站。

## 特性

- **100+ 目录条目**：交互着色器、3D 场景、落地页模板和 UI 元素
- **Vue 3 + TypeScript** —— 每个组件都提供带类型的 props 和 `defineComponent` 兼容的 API
- **可摇树优化** —— 根入口具名导出，也支持 `components/*` 深层导入
- **着色器运行时自包含** —— 多数特效内嵌完整作者源码，无需运行时联网拉取
- **深色优先主题**，支持浅色模式、减弱动态效果（reduced-motion）和页面可见性感知的渲染循环
- **内置文档站** —— 在线预览完整目录、安装指南和每个组件的 API 契约

## 安装

```bash
npm install @starcode000/threeui-vue three
```

Peer 依赖：`vue >= 3.5`、`three >= 0.165 < 1`。

## 快速上手

```vue
<script setup>
import { LiquidMetalButton } from "@starcode000/threeui-vue";
import "@starcode000/threeui-vue/style.css";
</script>

<template>
  <LiquidMetalButton text="Launch" variant="pill" />
</template>
```

每个组件也支持深层导入：

```js
import LiquidMetalButton from "@starcode000/threeui-vue/components/LiquidMetalButton.js";
```

## 浏览组件目录

本仓库本身就是文档站：

```bash
pnpm install
pnpm dev
```

打开命令输出的本地地址，即可带实时预览地浏览全部组件、源码和 API 契约。

完整文档类模板（落地页等完整 HTML 运行时）按路径引用其原始 `.html` 文档。这些文档位于仓库的 [`public/`](public) 目录，自行托管后，对应组件会从你的源加载它们。

## 开发

```bash
pnpm install        # 安装依赖
pnpm dev            # 文档站热更新开发
pnpm build          # 类型检查 + 重新生成源码注册表 + 构建文档站
pnpm build:lib      # 构建可发布的库到 lib-dist/
pnpm verify:neuform # 校验 neuform 文档构建（116 项检查）
```

## 许可证

代码采用 [MIT](LICENSE)。内置素材与字体有各自的条款 —— 再分发前请查阅 [ASSET-LICENSES.md](ASSET-LICENSES.md)、[FONT-LICENSES.md](FONT-LICENSES.md) 和 [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md)。